javascript - 删除后 UI-Select 不更新模型

Question

我在 ui-select 中有一个简单的列表，如果我选择删除一个项目，并在 ui-select 中加载列表中可用的第一个元素，关联的模型不会更新。不知道我错过了什么!

ui-select 的定义:

<ui-select on-select="loadSelected($item)" ng-model="selectedDude">
    <ui-select-match placeholder="{{selectedDude.name}}">
      <span> {{selectedDude.name}} </span>
    </ui-select-match>
    <ui-select-choices repeat="d in data | filter: $select.search">
      <span ng-bind-html="d.name  | highlight: $select.search"></span>
    </ui-select-choices>
  </ui-select>

这个函数是我用来删除的函数:

$scope.deleteSelected= function(){
            $scope.data.splice($scope.data.indexOf($scope.selectedDude),1);
            $scope.selectedDude = $scope.data[0];
        };

Check the example in plunker谢谢你的帮助。

Answer 1

我已经为您修改了 plunkr 以使其正常工作。 https://plnkr.co/edit/rCKCng6ecXiZ8cNGTBlz?p=preview

首先，我在 Array 中添加了一个小的实用方法来从对象列表中删除一个项目:

Array.prototype.remove = function(key, value) {
    var index = -1;
    angular.forEach(this, function(item, i) {
        if (item[key] === value) {
            index = i;
        }
    });

    if (index > -1) {
        this.splice(index, 1);
        return true;
    }
    return false;
};

有两个问题，第一个与您如何从对象数组中删除 selectedDude 有关。

$scope.data.splice($scope.data.indexOf($scope.selectedDude), 1);

因为存储在数组中的 dude 对象引用实例可能与范围变量 selectedDude 所具有的不同。因此，splice 在您更改其中的任何内容时可能无法始终正常工作。

因此我们通过在索引中搜索它(使用实用程序方法)来精确地删除它。

第二个问题是嵌套的子作用域。阅读here了解更多信息。我们通过创建对象 dataStore 并从该对象引用 selectedDude 来解决此问题，例如 dataStore.selectedDude 以防止 Javascript 中的子继承问题。