I'm writing an angular.js directive that is a reusable input ponent for an array of objects.

Since it is impossible to use primitive values in ng-repeat (see: What is the angularjs way to databind many inputs?), I have to pass an array of objects to the ponent:

In the controller I initialize:

$scope.theSimpsons = [{ value: 'Bart' }, { value: 'Lisa' }];

And then use it in the HTML file:

<div ng-app="App">
    <div ng-controller="AppCtrl">
        <multi-input items="theSimpsons" />
    </div>
</div>

The directive itself is implemented like this:

directive('multiInput', function () {
return {
    restrict: 'E',
    scope: {
        items: '=items'
    },
    template:
        '<div>' +
        '<div ng-repeat="item in items">' +
        '<input type="text" ng-model="item.value">' +
        '<a ng-click="items.splice($index, 1)">remove</a>' +
        '</div>' +
        '<a ng-click="items.push({value:\'\'})">add</a>' +
        '</div>'
};
});

This is all working good.

My question: what if the objects don't have a value?

This directive codes the name of the property (value) hard. But what, if I want to have an array like this: [{ name: 'Bart' }, { name: 'Lisa' }].

Is it possible to pass the name of the object, e.g. like

<multi-input items="names" property="name"></multi-input>

and use it somehow in the directive to access the name property?

Here is the JSFiddle / I have created to show this directive.

I'm writing an angular.js directive that is a reusable input ponent for an array of objects.

Since it is impossible to use primitive values in ng-repeat (see: What is the angularjs way to databind many inputs?), I have to pass an array of objects to the ponent:

In the controller I initialize:

$scope.theSimpsons = [{ value: 'Bart' }, { value: 'Lisa' }];

And then use it in the HTML file:

<div ng-app="App">
    <div ng-controller="AppCtrl">
        <multi-input items="theSimpsons" />
    </div>
</div>

The directive itself is implemented like this:

directive('multiInput', function () {
return {
    restrict: 'E',
    scope: {
        items: '=items'
    },
    template:
        '<div>' +
        '<div ng-repeat="item in items">' +
        '<input type="text" ng-model="item.value">' +
        '<a ng-click="items.splice($index, 1)">remove</a>' +
        '</div>' +
        '<a ng-click="items.push({value:\'\'})">add</a>' +
        '</div>'
};
});

This is all working good.

My question: what if the objects don't have a value?

This directive codes the name of the property (value) hard. But what, if I want to have an array like this: [{ name: 'Bart' }, { name: 'Lisa' }].

Is it possible to pass the name of the object, e.g. like

<multi-input items="names" property="name"></multi-input>

and use it somehow in the directive to access the name property?

Here is the JSFiddle http://jsfiddle/napU6/5/ I have created to show this directive.

• javascript
• angularjs
• angularjs-directive

• Your question helped me in my problem $scope.theSimpsons = [{ value: 'Bart' }, { value: 'Lisa' }]; kuddos – Usman Iqbal Commented Dec 28, 2016 at 10:48

1 Answer 1

Use another attribute to pass the name of the property

<multi-input items="myItems" name="value"></multi-input>

Directive

app.directive('multiInput', function(){
  return {
    restrict: 'E',
    replace: true,
    scope: {
      items:'=',
      name: '@'
    },
    template:'<div>'
      + '<div ng-repeat="item in items">'
      + '<input type="text" ng-model="item[name]">'
      + '<a ng-click="items.splice($index, 1)">remove</a>'
      + '</div>'
      + '<a ng-click="items.push({})">add</a>'
      + '</div>'
  }
});

Demo: Plunker