5

我正在编写一个 angular.js 指令，它是对象数组的可重用输入组件。

由于不可能在其中使用原始值ng-repeat（请参阅：What is the angularjs way to databind many inputs？），我必须将对象数组传递给组件：

在我初始化的控制器中：

$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?

该指令对属性名称 ( value) 进行了硬编码。但是，如果我想要一个这样的数组：[{ name: 'Bart' }, { name: 'Lisa' }].

是否可以传递对象的名称，例如

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

并在指令中以某种方式使用它来访问该name属性？

这是我为显示此指令而创建的 JSFiddle http://jsfiddle.net/napU6/5/ 。

4

1 回答 1

4

使用另一个属性来传递属性的名称

<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

于 2013-05-01T14:55:19.070 回答