AngularJS - возможно ли для 2 разных моделей разных структур синхронизировать или совместно использовать состояния?

#javascript #angularjs

Вопрос:

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

Контроллер

 listA = ['item1','item2'...'itemn']; //Master list of items
$scope.selectedItems = ["item1",... "item5"]; //selected items
$scope.attributesModel = [                 //new model based on selected items
    {"index":5,"attribute":"item1"},
    {"index":10, "attribute":"item2"},
    {"index":13, "attribute":"item3"},
    {"index":21, "attribute":"item4"},
    {"index":24, "attribute":"item5"}

];

Просмотр части 1

   <td>
      <div class="checkbox checkbox-notext">
        <input checklist-model="selectedItems" checklist-value="key" type="checkbox" id="{{key}}" ng-disabled="exceededLimit amp;amp;amp;amp; !checked" />
      </div>
    </td>
    <td>
      <label for="{{key}}">{{key}}{{$index}}</label>
    </td>

просмотр части 2

 <div ng-repeat="(index, row) in attributesModel" >
<div class="margin10">
<div>Index<input ng-model="row.index" value="row.index" type="number" class="indexInputs"></input>{{row.attribute}}</div>
</div>
</div>

Теперь я хотел бы синхронизировать $scope.SelectedItems и $scope.attributesModel. Когда флажок снят, модели SelectedItems и attributesModel удаляют этот элемент, и наоборот. Поэтому каждый раз, когда кто-то устанавливает новый флажок, им предоставляется attributesModel с пустым текстовым полем для ввода значения индекса.

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

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

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

Дайте мне знать, если я смогу что-нибудь уточнить.

1. Прослушиватель $ watch вызывается с 3 аргументами (newValue, oldValue, scope), возможно, вы могли бы сравнить oldValue с newValue, чтобы определить, какой элемент нужно вставить / объединить?

2. @JonathanGawrych Как я могу просмотреть отдельный элемент в списке? Если я просматриваю список, newValue и oldValue — это просто весь список без подсказки о том, какой элемент был удален (если я не повторяю список). Есть ли способ просмотреть отдельный элемент в списке?

Ответ №1:

Я не уверен, в чем проблема, но вы могли бы использовать ngChange флажки:

 <input type="checkbox" ... ng-change="..." />

Я полагаю, у вас есть директива контрольного списка или что-то в этом роде, поэтому вам следует что-то там сделать, но (поскольку вы не делитесь этим с нами) Я не могу сказать, что именно 🙂

Обновить:

Поскольку checklist директива является внешней зависимостью, вы могли бы обрабатывать ng-chage в своем коде:

 <input type="checkbox" ... ng-change="changed(key)" />

/* In the controller: */
...
$scope.changed = function (key) {
    if ($scope.selectedItems.indexOf(key) === -1) {
        // The checkbox for `key` was unchecked...
    } else {
        // The checkbox for `key` was checked...
    }
};