绑定到正确的模型 - 具有相同的名称

Question

我有一个ng-repeat显示2个表单（数组有2个项目）

我有一个空输入，每个都有相同的模型，如下所示：

<div ng-repeat=“group in groups”>
    <form>
        <input type=“text” ng-model=“group.name” placeholder=“name” />
    </form>
</div>

现在这很有效，直到我尝试在第一个输入中输入文本，它也会自动进入第二个输入。

是否有一种简单的方法可以绑定到我实际输入的输入？

由于

Answer 1

您的PLNKR example与您的问题不符。

简化您的代码：

<!-- Top loop doesn't repeat -->
<div ng-repeat="group in groups">
    <div ng-repeat="g in group">
        <div ng-repeat="info in g.info.data">
             <input ng-model="info.name" placeholder="Name" />
        </div>

                   <!-- This is the problem -->
        <input ng-model="test.name" placeholder="Name">
        <button ng-click="nameAdd($parent.$index)">
            Add
        </button>
    </div>
</div>

使用添加按钮的输入使用相同的ng-model名称。这里还有三个嵌套循环，只需要两个。

数据

$scope.groups = {
    "data": [{
        "id": 1,
        "name": "Group 1",
        "site_id": 3,
        "info": {
            "data": [{
                "id": 1,
                "name": "Jim"
            }]
        }
    }, {
        "id": 2,
        "name": "Group 2",
        "site_id": 3,
        "info": {
            "data": [{
                "id": 10,
                "name": "Bob"
            }, {
                "id": 11,
                "name": "Terry"
            }]
        }
    }]
}

将模板更改为：

<!-- remove top loop 
<div ng-repeat="group in groups">
-->
    <div ng-repeat="groupDatum in groups.data" ng-cloak>
        <div ng-repeat="infoDatum in groupDatum.info.data">
             <input ng-model="infoDatum.name" placeholder="Name" />
        </div>

                   <!-- use groupDatum to store new name -->
        <input ng-model="groupDatum.newName" placeholder="Name">
                   <!-- use groupDatum as arg to ng-click -->
        <button ng-click="nameAdd(groupDatum)">
            Add
        </button>
    </div>

nameAdd函数：

$scope.nameAdd = function(groupDatum) {
    var newId = uniqueId();
    var newName = groupDatum.newName;
    groupDatum.info.data.push({id: newId, name: newName});
}

Answer 2

尝试这样，

<div ng-repeat=“group in groups”>
<form>
    <input type=“text” ng-model=“groups[$index].name” placeholder=“name” />
</form>
</div>

除非你想为每个输入标签创建一个新的from，否则你也可能把表格标签放在转发器之外