Angularjs 绑定到正确的模型-同名

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

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

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

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

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

谢谢

像这样试试

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

您还可能将表单标记放在中继器的外部，除非您想为每个输入标记创建一个新的from，因为您的问题与您的问题不匹配

简化代码： 将模板更改为：

---

一个更好的问题是，为什么在两个相同的输入上使用相同的模型？然后我如何在控制器中访问它？$scope.groups？你已经有了那个变量。用于重复ng的对象如果您为表单命名，angularjs将为每个表单创建一个对象，但不确定是否需要。group in groups为您创建组[$index]。在我看来，无论出于什么原因，同一个对象只是在数组中出现了两次。嗯，

groups

是一个取自服务调用的json数组，所以我只是对它进行迭代，创建两个“groups”，其中包含来自json对象的数据。输入字段是一个简单的输入，用于向组数组添加更多数据。这太棒了！非常感谢你！我已经实施了更改，并且可以确认它现在按照预期工作

<!-- 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>

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

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