угловые JS добавить значение флажков массива

Question

У меня есть этот код:

<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}} 

я хочу, чтобы получить значение флажков на массиве

Answer 1

ng-true-value принимает только строки, так что вы должны будете используйте обходной путь. Это было feature request в течение некоторого времени. В то же время, вы можете сделать это:

Создать ids объект в контроллере, как:

$scope.ids = {}; 

и изменить ng-model ссылаться на ключ в этом объекте. Вы можете использовать значения по умолчанию флажок true/false:

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

После этого вы можете петля по клавишам в ids проверки true.

Here is a fiddle

Answer 2

Я начну с того, что я действительно не люблю варианты делать это в угловой. Я даже не могу сказать, что это лучше, чем принятый ответ, но он сохраняет данные в модели.

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> 

Теперь только $ посмотреть значение массива и фильтр, если он изменяется в контроллере (убедитесь, чтобы передать параметр объекта равенства):

$scope.ids = []; 

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

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

Когда я начал отвечать этот вопрос, я думал, что самыми идиоматическими вариантами было бы добавить директиву ng-change на входе:

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

К сожалению, это не работает должным образом. Пользовательский интерфейс не обновляется должным образом при удалении значений. Я также хочу отметить, что вы можете сделать это без директивы повтора:

<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' /> 

В этом случае $ часы, безусловно, лучше, чем добавление нг-изменение каждого входа. Наконец, здесь работает plunkr. Функция $ watch в конечном итоге работает дважды каждый раз, когда флажок установлен или снят, но это действительно так, как должно быть!

Answer 3

Я обнаружил, что this directive предоставил функциональность, которую я искал. Основная проблема, с которой я столкнулся с более распространенными решениями, заключается в том, что у меня есть два массива, которые мне нужны для хранения данных, совместимых с несколькими избранными списками. Директива checklistModel предоставляет эту самую базовую функциональность и работает с несколькими моделями.