AngularJS - 带有动态对象数组的指令

Question

我正在尝试创建一个具有一组动态输入框的表单。我正在尝试让 ng-models 与数组项一起工作，但我显然做错了什么。

我的问题似乎是索引模板中的范围数组 lineItems。

这是我的 jsfiddle：http://jsfiddle.net/dk253/9ykuuobq/

这是我的代码：

<div ng-controller="MyCtrl">
     <h2>Testing Arrays</h2>

    <button type="button" ng-click="addItem()" class="btn btn-primary">Howdy</button>
    <div ng-repeat="item in items" item="item" my-index="{{$index}}" itemlist></div>
</div>
<script type="text/ng-template" id="template.html">
    <div class = "row">
        <div class = "col-xs-6"> <input name= "itemNum-{{item.itemNum}}" type = "number" class="form-control"
            placeholder = "Item Number" ng-model="items[{{item.itemNum}}].itemNum" required> </div>
        <div class = "col-xs-6"> <input name= "name-{{item.itemNum}}" type = "text" class="form-control"
            placeholder = "Name" ng-model="items[{{item.itemNum}}].name" required> </div>
    </div>
</script>

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function ($scope) {
    $scope.count = 0;

    $scope.items = [];

    var baseItem = {
        itemNum: 0,
        name: "New"
    };

    $scope.addItem = function () {
        newItem.itemNum = $scope.count;
        var newItem = angular.copy(baseItem);
        newItem.itemNum = $scope.count;
        $scope.items.push(newItem);
        $scope.count += 1;
    };
});

myApp.directive('itemlist', function ($compile) {
    return {
        templateUrl: 'template.html',
        restrict: 'A',
        replace: true,
        transclude: true,
        scope: { item: '=', myIndex: '@' }
    };
});

感谢您的帮助！

Answer 1

fiddle有几个错误：

1. $scope.addItem 在定义之前使用 newItem。删除第一行（可能是错字）。
2. ng-model：
   1. 它接受没有 {{...}} 的表达式。所以 ng-model="items[{{item.itemNum}}].itemNum" 会变成 ng-model="items[item.itemNum].itemNum"
   2. 这仍然是错误的，因为该指令具有隔离范围并且 items 变量不可见。但是 item 是可见的，所以你只需要： ng-model="item.itemNum" （和 ng-model="item.name"）.

通过这些更改，它似乎正在运行：http://jsfiddle.net/9ykuuobq/19/