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 работает дважды, каждый раз, когда флажок установлен или снят, но это действительно так, как должно быть!