ng-model все изменения все сразу

Question

jsfiddle

Hi.
У меня проблема с моим приложением. Я должен написать несколько выборок, используя ng-repeat, и каждый из этих выборок должен быть заполнен теми же данными.

Проблема в том, что когда один из них изменен, другие выбирают изменения одного и того же значения - почему ?.

Я полагаю, что проблема в ng-модели - возможно, я не понимаю, как работает «иерархия» ng-модели.

• Если имя ng-модели является только «опцией» - это не работает!
• Если имя ng-модели «something.option» - это также не !
• Если имя ng-модели - «something.else.option» - оно работает , но все выборки заполнены!

HTML:

<div ng-controller="MyCtrl"> 
    <div ng-if="models" ng-repeat="m in models"> 
    <br><label>{{m.model}} ({{m.no}})</label><br> 

    <select ng-model="models.m.opModel" ng-options="opt.value as opt.text for opt in options" ng-change="foo()"></select> 
    </div> 
</div> 

JS:

var myApp = angular.module('myApp',[]); 

function MyCtrl($scope) { 
    $scope.models = [ 
     {'no':'A', 'model':'alpha'}, 
     {'no':'B', 'model':'beta'}, 
     {'no':'C', 'model':'gamma'} 
     ]; 
    $scope.options = [ 
     {'value':1, 'text':'one'}, 
     {'value':2, 'text':'two'}, 
     {'value':3, 'text':'three'} 
     ]; 

    $scope.foo = function(){ 
       alert($scope.models.m.opModel); 
    } 
} 

Что я делаю неправильно?

Большое спасибо.

Answer 1

Вы создали объект области видимости, называемый «m», который является текущим дочерним элементом списка «models». Поэтому для каждого раскрывающегося списка вы будете иметь другой объект области «m». Это то, что вам нужно связать в своей ng-модели, чтобы выпадающий список привязан к его уникальному родительскому элементу в списке «models».

Сменить <select ng-model="models.m.opModel"> на <select ng-model="m.opModel", чтобы устранить эту проблему.

Чтобы получить доступ к значению с помощью функции foo(), вы должны будете использовать эту обновленную функцию:

$scope.foo = function(index){ 
    alert($scope.models[index].opModel) 
} 

И обновить <select> так:

<select ng-model="m.opModel" ng-options="opt.value as opt.text for opt in options" ng-change="foo($index)"></select> 

Вы создаете нг -модель называется «opModel» в ng-repeat, что означает, что у вас будет три новых opModels в $ scope.models. Это массив, к которому вы можете получить доступ позже, используя значение индекса, чтобы указать, к какому из $scope.models[].opModel вы хотите получить доступ.

Обратите внимание, что я изменил код ng-change, чтобы отправить текущий $ index, который в основном является счетчиком ng-repeat. Таким образом, ваша функция foo() получит либо 0, 1 или 2, что позволяет нам получить доступ к определенному ngModel, к которому нам нужно получить доступ.

Answer 2

Вы связываетесь с единственным объектом models. Внутри ng-repeat повторение доступно «по объему». Вы, вероятно, хотите изменить этот код:

<div ng-controller="MyCtrl"> 
    <div ng-if="models" ng-repeat="m in models"> 
    <br><label>{{m.model}} ({{m.no}})</label><br> 

    <select ng-model="m.opModel" ng-options="opt.value as opt.text for opt in options" ng-change="foo()"></select> 
    </div> 
</div> 

Посмотрите на ng-model="m.opModel", это то, что я изменился. Теперь вы обновляете значение отдельного элемента и не вставляете новый объект в массив, который затем повторно используется всеми элементами ng-repeat (поэтому все значения будут обновляться одновременно).