I'm writing an angular.js directive that is a reusable input component 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 component:
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.net/napU6/5/ I have created to show this directive.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With