ng-options & ng-repeat: почему угловая модель не привязана?

Question

ng-options & ng-repeat: почему угловая модель не привязана?

0

Когда я привязываю элементы 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, чтобы проиллюстрировать проблему.

Как идет?

ryancey 06 июль 2015, в 15:41

Источник

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

Sidharth Panwar · Answer 1 · 2015-07-06T11-05-00.000Z

Здесь мое понимание проблемы:
Случай 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] ?
family это просто переменная, которая указывает на элемент в массиве. Любая переменная может быть указана на другой объект. Если мы указываем семейство на другой объект, он больше не связан с model.families. Принимая во внимание, что когда вы используете $ index, вы фактически указываете model.families [$ index] на новый объект. Что ты хочешь сделать.
Кроме того, это не имеет никакого отношения к Angular или ngRepeat. Вы можете эмулировать то же поведение в простом JavaScript с помощью цикла for.
Я получил это, но мне интересно, почему family не указывает здесь на model.families[$index] , как это должно быть. Он должен быть null если я не назначу ему новое значение, в моем случае объект, вы согласны?
Может быть, это поможет: stackoverflow.com/questions/17872317/javascript-variables-as-object-pointers