Question

当我将select元素绑定到ng-model family时，它指的是font.families数组的元素， Angular不会绑定所选的。数组保持为空，只有第一个null元素。

但是当我将select元素绑定到font.families[$index]时，绑定才有效。

// Javascript
$scope.font.families = [null]; // Used to create an empty first line in the form

$scope.families = [
  { name: "Foo", parent: "Bar" },
  { name: "Doo", parent: "Dar" }
];

$scope.mainFamilies = [
  { name: "Bar", children: ["Foo", "Baz"] },
  { name: "Dar", children: ["Doo", "Hoo"] }
];

<!-- HTML -->

Font families : {{ font.families }}

<div ng-repeat="family in font.families track by $index">

    Family : {{ family }}

    <ng-form name="familyRow">

    <select ng-options="fam as fam.name group by fam.parent for fam in families"
            ng-model="font.families[$index]"
            name="family">
        <option disabled value="">—</option>
    </select>

    <select ng-options="mainFam.name as mainFam.name for mainFam in mainFamilies"
            ng-model="font.families[$index].parent"
            name="mainFamily">
        <option disabled value="">—</option>
    </select>
</div>

Plunker来说明问题。

怎么来的？

Answer 1

以下是我对这个问题的理解：
案例1（工作）：您正在使用ng-model =“model.families [$ index]”。在这种情况下，当你在这里做出选择时会发生什么：

model.families[0] -> Your selection

案例2（不工作）：您正在使用ng-model =“family”。在这种情况下，这就是正在发生的事情：

family -> model.families[0] -> null

进行选择时：家庭 - ＆gt;新选择

model.families[0] -> null

问题在于，在第二种情况下，赋值会导致族变量被完全赋值，并且源数组保持不变。

您可以通过在html中添加以下语句来进一步验证：

family: {{family}}  
model.families: {{model.families[$index]}}
Are they equal?: {{familly === model.families[$index]}}

ng-options＆amp; ng-repeat：为什么角度模型没有绑定？

1 个答案: