Angular js добавить значение флажков в массив
У меня есть этот код:
<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}}
Я хочу получить значения флажков в массиве
Ответы
Ответ 1
ng-true-value
принимает только строки, поэтому вам нужно использовать обходной путь. Это был запрос функции в течение некоторого времени. Тем временем вы можете сделать это:
Создайте объект ids
в контроллере, например:
$scope.ids = {};
и измените ng-model
, чтобы ссылаться на ключ в этом объекте. Вы можете использовать значения по умолчанию true/false
:
<td><input type="checkbox" ng-model="ids[doc.provider.Id]"></td>
Затем вы можете перебирать ключи в ids
для проверки true
.
Вот скрипка
Ответ 2
Я обнаружил, что эта директива предоставила функциональность, которую я искал. Основная проблема, с которой я столкнулся с более распространенными решениями, заключается в том, что у меня есть два массива, которые мне нужны для хранения данных, совместимых с несколькими избранными списками. Директива checklistModel предоставляет эту самую базовую функциональность и работает с несколькими моделями.
Ответ 3
Начну с того, что мне действительно не нравятся варианты для этого в angular. Я даже не могу сказать, что это лучше, чем принятый ответ, но он сохраняет данные в модели.
Разметка:
<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()'/>
К сожалению, это не работает должным образом. Пользовательский интерфейс не обновляется должным образом при удалении значений. Я также хочу указать, что вы можете сделать это без директивы repeat:
<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' />
В этом случае $watch определенно лучше, чем добавление ng-change для каждого входа. Наконец, здесь работает plunkr. Функция $watch работает дважды, каждый раз, когда флажок установлен или снят, но это действительно так, как должно быть!