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中的子级继承问题。

删除后，用户界面选择不会更新模型

1 个答案: