$watch通过 ng-repeat 迭代的单个对象中的 UI 选择更改

Question

我正在与<ui-select>一起工作，遇到了一个我显然不知道如何解决的问题。SO上有一堆相关的主题，但是，它们都没有涵盖我的特定问题，我认为这对于以前使用此指令的人来说非常简单。

我有一个大物体，里面有item物体，像这个：

let items = [{id: 1, name: 'name'}, {id: 2, name: 'name2'}];

我正在迭代对象以使其在前面可见。该选项将显示在

<ui-select-match allow-clear="true">
<span>{{ $select.selected.label }}</span>  
</ui-select-match>

标签将根据"监视"值在控制器中选择。我的问题是我应该在ng-model中设置什么来观察单个项目级别的变化并更新它？

我尝试使用按索引跟踪，ng-change而不是手表以及一堆其他方法，但没有带来任何结果。

模板：

<div ng-repeat="item in vm.items">
<div class="form-group field">
<label>Items:</label>
<ui-select ng-model="item.id"
ng-keyup="vm.newItems({ keyword: $select.search })"
search-enabled="false">
<ui-select-match allow-clear="true">
<span>{{ $select.selected.label }}</span>  
</ui-select-match>
<ui-select-choices repeat="item.id as item in vm.shortlistsList">
<pre>Name: {{ item.label }}</pre><pre>Id: {{ item.id }} </pre>
</ui-select-choices>
</ui-select>
</div>

在控制器中：

function $onChanges() {
$scope.$watch('item.id', function (newValue, oldValue) {
console.log(item.id);
});
}

问题：我如何观看每个单独的项目，我应该将什么/如何传递给ng-model？目前，我认为没有办法做到这一点，因为我的半天尝试是徒劳的。

Answer 1

经过漫长而痛苦的一天实验，我找到了一个可行的解决方案：

模板：

<div ng-repeat="item in vm.items track by $index">
<div class="form-group field">
<label>Items:</label>
<ui-select ng-model="item[$index]"
ng-keyup="vm.newItems({ keyword: $select.search })"
search-enabled="false">
<ui-select-match allow-clear="true">
<span>{{ $select.selected.label }}</span>  
</ui-select-match>
<ui-select-choices repeat="item.id as item in vm.shortlistsList">
<pre>Name: {{ item.label }}</pre><pre>Id: {{ item.id }} </pre>
</ui-select-choices>
</ui-select>
</div>

控制器：

for (let i = 0; i < vm.items.length; i++) {
$scope.$watch('vm.items[' + i + ']', function (newValue, oldValue) {
if (newValue && oldValue !== null) {
return newValue.label = newValue.name;
}
}, true);
}