kątowe js dodać wartość do tablicy wyboru

Question

mam ten kod:

<tr ng-repeat="doc in providers">  
    <td><input type="checkbox" ng-true-value="{{doc.provider.Id}}" ng-false-value="" ng-model="ids"></td> 
</tr> 

{{ids}} 

Chcę uzyskać wartości pola wyboru na tablicy

Answer 1

ng-true-value akceptuje tylko ciągi tak trzeba użyj obejścia. Od jakiegoś czasu jest to feature request. W międzyczasie, można to zrobić:

Utwórz obiekt ids w sterowniku jak:

$scope.ids = {}; 

i zmienić ng-model odwołać klucz w tym obiekcie. Można użyć wartości domyślnej true/false checkbox:

<td><input type="checkbox" ng-model="ids[doc.provider.Id]"></td> 

Następnie można pętli nad kluczami w ids sprawdzanie true.

Here is a fiddle

Answer 2

Zacznę od tego, że ja naprawdę nie lubię opcje robi to w kanciasty. Nie mogę nawet powiedzieć, że jest to lepsze niż zaakceptowana odpowiedź, ale zachowuje dane w modelu.

Markup:

<tr ng-repeat='(index, doc) in provider'> 
    <td><input type='checkbox' ng-true-value='{{doc.provider.Id}}' ng-model='ids[index]' /></td> 
</tr> 

<span ng-repeat='id in ids'>{{id}} </span> 

Teraz tylko $ oglądać wartość tablicową i filtr, gdy zmienia się w kontrolerze (upewnij się, aby przekazać parametr równości Object):

$scope.ids = []; 

$scope.updateIds = function() { 
    $scope.ids = $scope.ids.filter(function(id) { 
     return !!id; 
    }); 
}; 

$scope.$watch('ids', $scope.updateIds, true); 

Kiedy zacząłem odpowiadając to pytanie, myślałem, że najbardziej idiomatycznymi opcjami byłoby dodanie dyrektywy ng-change na wejściu:

<input type='checkbox' ng-true-value='{{doc.provider.Id}}' ng-model='ids[index]' ng-change='updateIds()'/> 

Niestety to nie działa zgodnie z oczekiwaniami. Interfejs użytkownika nie aktualizuje się prawidłowo podczas usuwania wartości. Chciałbym także podkreślić, że można to zrobić bez dyrektywy Powtarzam:

<input type='checkbox' ng-true-value='1' ng-model='ids.0' /> 
<input type='checkbox' ng-true-value='2' ng-model='ids.1' /> 
<input type='checkbox' ng-true-value='3' ng-model='ids.2' /> 
<input type='checkbox' ng-true-value='4' ng-model='ids.3' /> 
<input type='checkbox' ng-true-value='5' ng-model='ids.4' /> 
<input type='checkbox' ng-true-value='6' ng-model='ids.5' /> 

W tym przypadku $ zegarek jest zdecydowanie lepszy niż dodanie NG-zmiany do każdego wejścia. Wreszcie, tutaj działa plunkr. Funkcja $ watch kończy działanie dwa razy za każdym razem, gdy pole jest zaznaczone lub odznaczone, ale tak właśnie musi być!

Answer 3

Znalazłem, że this directive zapewnia funkcjonalność, której szukałem. Głównym problemem, który napotkałem z bardziej powszechnymi rozwiązaniami, jest to, że mam dwie tablice, które musiałem przechowywać w pamięci kompatybilnej z listą wyboru wielokrotnego. Dyrektywa checklistModel zapewnia tę bardzo podstawową funkcjonalność i działa z wieloma modelami.