UI Select在删除后不会更新模型

Question

我在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];
        };

查看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可能不会一直正常工作，因为你改变了其中的任何内容

因此，我们通过索引搜索（使用实用程序方法）来精确地删除它。

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