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

Question

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

我想知道我可以禁用按钮，如果用户键入的输入值不是uib-typeahead列表的项目（在这种情况下，阵列items）？并且当它是数组的一个项目时启用它？

2.而且，如果用户试图通过已添加的添加按钮添加数组的项目，我该如何禁用相同的按钮？这些项目保存在阵列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-预输入列表的项目（在这种情况下 的数组项）？并且当它是数组的一个项目时启用它？

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

还有，我怎样才能当用户尝试通过添加按钮，这是已经 加入到添加数组项的项禁止相同的按钮？这些项目保存在Array addedItems中。

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