如何在angular中禁用选择视图

Question

我想禁用ui多重选择视图，每当我在我的例子中选择特定的值"Nicole"。如果我选择"Nicole"，它禁用ui选择，然后用户无法选择其他选项。

当用户选择"Nicole"时，我们可以删除先前选择的选项吗?我只想当用户选择"Nicole"时，它禁用选择视图并删除其他选择选项。

砰砰作响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);
}

Answer 1

我把你的活塞叉在这里了。

index . html

我改变

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;
}

当前，当您选择"Nicole"时，它会禁用ui选择选择器，并从列表multipleDemo中删除先前添加的用户。出于某种原因，它从multipleDemo列表中删除了先前添加的用户，但没有从UI中删除它。摘要周期没有正确更新。也许值得在你的项目中尝试一下，看看它是否得到了正确的更新。

希望这对你有帮助!

Answer 2

修改OnClickSelect函数调用到OnClickSelect($item， $select)，并在范围内添加禁用。$select variable将帮助我们操作选中的数据。

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

$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);
}