$watch 在通过 ng-repeat 迭代的单个对象中更改 ui-select

Question

我在 <ui-select> 工作时遇到了一个我显然不知道如何解决的问题。 SO 上有很多相关主题，但是，none 其中涵盖了我的具体问题，我认为这对于以前使用过该指令的人来说非常简单。

我有一个大物体，里面有 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>

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

我尝试使用 track by index、ng-change 而不是 watch 以及其他一些没有结果的方法。

模板：

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

问题： 我如何观看每个单独的项目，what/how 我应该传递给 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);
    }

$watch 在通过 ng-repeat 迭代的单个对象中更改 ui-select

$watch changes ui-select in individual object iterated via ng-repeat

javascript

angularjs

ui-select