通过输入条件禁用/启用按钮 [AngularJS]

Question

我正在用 AngularJS 开发一个应用程序。

1. 我想知道如果用户输入的输入值不是uib-typeahead 列表中的项目（在本例中为数组items ）？并在它是数组的一项时启用它？

2. 此外，当用户尝试通过已添加的添加按钮添加数组items 的项目时，如何禁用相同的按钮？项目保存在数组addedItems中。

这是 HTML 中的输入和按钮：

<input type="text" ng-model="search1" uib-typeahead="item for item in items 
    | filter:$viewValue | limitTo:10"/>

<button type="submit" class="btn btn-success" ng-click="action()" 
ng-disabled="(!search1)">Add</button>

这是items数组结构的示例：

var items = ["admin1", "admin2", "admin3", "admin4", "admin5"];

action() 函数在 JavaScript 中的控制器中定义：

$scope.items = ["admin1", "admin2", "admin3", "admin4", "admin5"];
$scope.search1 = undefined;
$scope.addedItems = [];
$scope.action = function() {
  $scope.addedItems.push($scope.search1);
  }

谢谢你*

Answer 1

我不确定我是否能完全理解你想要做什么。让我试试。

$scope.items = ["admin1", "admin2", "admin3", "admin4", "admin5"];
$scope.search1 = undefined;
$scope.addedItems = [];

//this method will help you know if the item exists already in the list
$scope.exists = function(list, item){
    return list.indexOf(item) > -1;
}

$scope.action = function() {
    $scope.addedItems.push($scope.search1);
}

之后就可以使用方法来启用或禁用按钮了，如下：

<button type="submit" class="btn btn-success" ng-click="action()" 
ng-disabled="exists(addedItems, search1)">Add</button>

希望对你有帮助！

Answer 2

1. 我想知道如果用户输入的输入值不是 uib-typeahead 列表中的项目（在此 以防阵列项目）？并在它是数组的一项时启用它？

在您的情况下，ui-select 将满足您的需求。

1. 另外，当用户尝试通过添加按钮添加一个数组项时，我如何禁用相同的按钮？ 添加？这些项目保存在 Array addedItems 中。

有几种方法可以做到这一点。
1. 将ng-change 方法添加到您的输入中，并在该方法中进行唯一检查。然后将唯一的检查结果绑定到按钮中的ng-disabled。
2. 这将是可重用的，但有点复杂。有一个自定义的唯一检查指令，它接受一个列表和一个输入。并让按钮监听错误。类似ng-disabled="form.search1.$unique"