如何在 angular 中禁用 select 视图？

Question

我想禁用 ui 多个 select 视图，只要我 select 在我的示例中的特定值 "Nicole" 。如果我 select "Nicole" 它禁用 ui select 然后用户无法 select 其他选项。

当用户 select "Nicole" 时，我们可以删除之前的 selected 选项吗？我只希望用户 select "Nicole" 禁用 select 视图并删除其他 selected 选项。

笨蛋 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

我分叉了你的 plunker here。

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

目前，当您 select "Nicole" 时，它会禁用 ui select 选择器，并从列表 multipleDemo 中删除之前添加的用户。出于某种原因，它将先前添加的用户从 multipleDemo 列表中删除，但不会将其从 UI 中删除。摘要周期未正确更新。可能值得在您的项目中尝试一下，看看它是否在那里得到正确更新。

希望对您有所帮助！

Answer 2

修改了对 OnClickSelect($item, $select) 的 OnClickSelect 函数调用并在范围内添加了禁用。 $select 变量将帮助我们操作 selected 数据。

使用 on-select="OnClickSelect($item, $select)" 和 ng-disabled="disabled" ui-select 标签。

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

如何在 angular 中禁用 select 视图？

how to disable select view in angular?

javascript

angularjs

angularjs-directive

ui-select