我正在编写一个 angular.js 指令,它是对象数组的可重用输入组件。
因为不可能在 ng-repeat
中使用原始值(参见:What is the angularjs way to databind many inputs?),我必须将一个对象数组传递给组件:
在我初始化的 Controller 中:
$scope.theSimpsons = [{ value: 'Bart' }, { value: 'Lisa' }];
然后在 HTML 文件中使用它:
<div ng-app="App">
<div ng-controller="AppCtrl">
<multi-input items="theSimpsons" />
</div>
</div>
指令本身是这样实现的:
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>'
};
});
一切正常。
我的问题:如果对象没有值
怎么办?
此指令对属性名称 (value
) 进行硬编码。但是,如果我想要一个像这样的数组:[{ name: 'Bart' }, { name: 'Lisa' }]
。
是否可以传递对象的名称,例如喜欢
<multi-input items="names" property="name"></multi-input>
并在指令中以某种方式使用它来访问 name
属性?
这是 JSFiddle http://jsfiddle.net/napU6/5/我已创建以显示此指令。
最佳答案
使用另一个属性来传递属性的名称
<multi-input items="myItems" name="value"></multi-input>
指令
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>'
}
});
演示:Plunker
关于javascript - AngularJS:将对象属性名称传递给指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16320224/