通過輸入條件禁用/啓用按鈕[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"