Как динамически давать значение для ng-модели в angularjs?

Здесь я динамически генерирую элемент html, используя ng-repeat eg

<div ng-repeat="type in types">
    <input  type="checkbox" ng-model="{{type}}" />{{ type }}
</div>

Я хочу установить значение типа для ng-модели. Возможно ли это, или я хочу установить значение этого типа для ng-true-value, подобного этому

<div ng-repeat="type in types">
    <input  type="checkbox" ng-model="{{type}}" ng-true-value="{{type}}" />{{ type }}
</div>

Ответы

Ответ 1

Так как ng-repeat создает дочернюю область для каждого типа/элемента/итерации, нам нужно связать ng-модель для каждого типа с родительской областью, а не с дочерней областью. Один из способов сделать это - использовать $parent:

<input type="checkbox" ng-model="$parent[type]">{{ type }}

Если $scope.types определен как в ответе @Alex, тогда свойства typeOne, typeTwo и typeThree появятся в родительской области, если щелкнуть соответствующий флажок, а значение свойства будет be true. Если отмеченный флажок установлен, свойство остается, и значение переключится на false. Поэтому ваш код должен будет проверить наличие несуществующих свойств и свойств, которые существуют со значением, установленным как true или false. Это немного грязно.

Я предпочел бы предопределить массив объектов в родительской области, где каждый объект имеет тип (имя) и логическое значение, указывающее, выбран ли он или нет:

$scope.types = [ 
  {name: 'typeOne', selected: false},
  {name: 'typeTwo', selected: false},
  {name: 'typeThree', selected: false}];

Затем $parent не требуется (потому что значение "type" будет ссылкой на родительский объект, а не на копию значения родительского свойства (примитивного)):

<input type="checkbox" ng-model="type.selected">{{ type.name }}

См. также Каковы нюансы объема прототипа/прототипного наследования в AngularJS?, чтобы узнать больше о ng-repeat и дочерних областях.

Ответ 2

Вы можете сохранить динамические значения в один из свойств $scope следующим образом:

function DynamicController($scope) {
    $scope.types = [
        "typeOne",
        "typeTwo",
        "typeThree"        
    ];
    $scope.typeValues = {};
};

<div ng-app ng-controller="DynamicController">
    <div ng-repeat="type in types">
        <input  type="checkbox" ng-model="typeValues[type]" ng-click="show()" /> {{ type }}
    </div>

    <h3>Values</h3>
    <div ng-repeat="type in types">
        {{ type }} : {{ typeValues[type] }}
    </div>
</div>

Затем вы можете проверить свои значения с помощью свойства typeValues ​​в своей области.

var i,
    length = $scope.types.length;

for (i = 0; i < length; i++) {
    console.log($scope.types[i] + " : " + $scope.typeValues[$scope.types[i]]);
}