通過輸入條件禁用/啟用按鈕[AngularJS]

Question

我正在AngularJS中開發一個應用程序。

1.我想知道如果用戶鍵入的輸入值不是uib-typeahead列表的項（在這種情況下為Array items ），如何禁用按鈕？ 並在它是數組的一項時啟用它嗎？

2.而且，當用戶嘗試通過已添加的“添加”按鈕添加數組items的一項時，如何禁用同一按鈕？ 這些項目保存在Array 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>

這是Array結構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列表的項（在這種情況下為Array項），如何禁用按鈕？ 並在它是數組的一項時啟用它嗎？

在您的情況下， ui-select將適合您的需求。

2. 而且，當用戶嘗試通過已添加的“添加”按鈕添加Array項時，如何禁用同一按鈕？ 這些項目保存在Array createdItems中。

有幾種方法可以做到這一點。
1.在輸入中添加ng-change方法，並在方法內部進行唯一檢查。 然后將唯一檢查結果綁定到按鈕中的ng-disabled 。
2.這將是可重用的，但會更加復雜。 有一個自定義的唯一檢查指令，該指令接受一個列表和一個輸入。 並讓按鈕監聽錯誤。 類似於ng-disabled="form.search1.$unique"