Когда я привязываю элементы select
к family
ng-model, который относится к элементу массива 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, чтобы проиллюстрировать проблему.
Как идет?
Здесь мое понимание проблемы:
Случай 1 (рабочий): вы используете ng-model = "model.families [$ index]". В этом случае, когда вы делаете выбор здесь, что происходит:
model.families[0] -> Your selection
Случай 2 (не работает): вы используете ng-model = "family". В этом случае это то, что происходит:
family -> model.families[0] -> null
Когда вы сделаете выбор: family → new selection
model.families[0] -> null
Проблема в том, что во втором случае присваивание приводит к тому, что семейству переменной присваивается новое значение в целом, а исходный массив остается тем же.
Вы также можете подтвердить это, добавив эти инструкции в свой html:
family: {{family}}
model.families: {{model.families[$index]}}
Are they equal?: {{familly === model.families[$index]}}
family
десолидаризована изmodel.families[$index]
?