Jak dynamicznie dać wartość dla modelu ng w angularjs?

Question

Oto jestem generowania elementu HTML dynamicznie przy użyciu ng-repeat np

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

Chcę ustawić wartość typu dla NG-modelu. Czy to możliwe, bo chcę, aby ustawić tę wartość typu dla NG-prawdziwe wartości jak ten

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

Answer 1

Od NG-repeat tworzy zakres podrzędny dla każdego typu/szt/iteracji, musimy skojarzyć NG-modelu dla każdego typu z zakresu nadrzędnego, a nie zakresu dziecięcej. Jednym ze sposobów, aby to zrobić jest użycie $ parent:

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

jeśli $ scope.types jest zdefiniowana jak w @ odpowiedź Alexa, potem właściwości typeOne, typeTwo i typeThree pojawi się na zakres dominującej, jeżeli odpowiednia opcja nie jest zaznaczona kliknięte, a wartością nieruchomości będzie true. Jeśli zaznaczone pole wyboru zostanie ponownie kliknięte, właściwość pozostanie, a wartość zmieni się na false. Twój kod musiałby zatem sprawdzić nieistniejące właściwości i właściwości, które istnieją z wartością ustawioną na true lub false. To trochę nieładne.

wolałbym predefine tablicę obiektów w zakresie dominującej, gdzie każdy obiekt ma rodzaj (nazwę), a wartością logiczną, aby wskazać, czy jest zaznaczone czy nie:

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

Następnie, $ rodzic nie jest wymagane (ponieważ wartość „typu” będzie odwołanie do obiektu nadrzędnego, zamiast kopii() wartości pierwotnej w lokalizacji macierzystej):

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

Zobacz również What are the nuances of scope prototypal/prototypical inheritance in AngularJS? aby dowiedzieć się więcej o ng -repeat i zakresy potomne.

Answer 2

można przechowywać wartości dynamicznych do jednej z właściwości $ zakres w następujący sposób:

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> 

Następnie możesz sprawdzić swoje wartości za pomocą właściwości typeValues ​​swojego zasięgu.

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

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