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而不是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);
     });
 }

问题：：我如何观看每个单独的商品，应将什么/方式传递给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

1 个答案: