如何在角度中禁用选择视图？

I want to disable the ui multiple select view whenever I select particaular value in my example "Nicole" .If I select "Nicole" it disable the ui select then user not able to select other option.

我想在我的示例“Nicole”中选择特定值时禁用ui多选视图。如果我选择“Nicole”,则禁用ui select然后用户无法选择其他选项。

can we remove previous selected option when user select "Nicole" .? I want only if user select "Nicole" it disable the select view and remove other selected option .

我们可以在用户选择“Nicole”时删除之前选择的选项。?我想只有当用户选择“Nicole”时才会禁用选择视图并删除其他所选选项。

plunker http://plnkr.co/edit/eVXVzlRXJ4KUZaNjID6P?p=preview

$scope.OnClickSelect = function(item) {
    $scope.multipleDemo.push(item.age)
}

$scope.OnRemoveSelect = function(item) {
    var index = $scope.multipleDemo.indexOf(item.age);
    $scope.multipleDemo.splice(index, 1);
}

2 个解决方案

#1

I forked your plunker here.

我在这里分叉你的傻瓜。

index.html

I changed

ng-disabled="disable"

ng-disabled="isDisabled()"

demo.js

$scope.disabled = false;

$scope.OnClickSelect = function(item) {
  if (item.name === 'Nicole') {
    // Check to make sure there is a previous user to remove
    if ($scope.multipleDemo.length > 0) {
      $scope.multipleDemo.pop();
    }
    // Disable user picker
    $scope.disabled = true;
  }
  $scope.multipleDemo.push(item.age);
}

$scope.isDisabled = function() {
  return $scope.disabled;
}

Currently, when you select "Nicole" it disables the ui select picker and it removes the previously added user from the list multipleDemo. For some reason, it's removing the previously added user from multipleDemo list but it's not removing it from the UI. The digest cycle is not updating properly. Might it worth it to try it in your project to see if it gets updated properly there.

目前,当您选择“Nicole”时,它会禁用ui选择选择器,并从列表multipleDemo中删除以前添加的用户。出于某种原因,它正在从multipleDemo列表中删除以前添加的用户,但它不是从UI中删除它。摘要周期没有正确更新。可能值得在您的项目中尝试它以查看它是否在那里得到正确更新。

Hope this helps!

希望这可以帮助!

#2

Modified OnClickSelect function call to OnClickSelect($item, $select) and added disabled in scope. $select variable will hepl us to manipulate the selected data.

修改了OnClickSelect函数调用OnClickSelect($ item,$ select)并在范围中添加了disabled。 $ select变量将使我们操纵所选数据。

use on-select="OnClickSelect($item, $select)" and ng-disabled="disabled" in ui-select tag.

在ui-select标签中使用on-select =“OnClickSelect($ item,$ select)”和ng-disabled =“disabled”。

$scope.disabled = false;
$scope.restrictNames = ["Nicole", "Michael"];

$scope.OnClickSelect=function(item, $select)
{
  if($scope.restrictNames.indexOf(item.name) != -1){
    $select.selected = [];
    $scope.multipleDemo = [];
    $scope.disabled = true;
  }
  $scope.multipleDemo.push(item.age);
}

#1