Question

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

1。我想知道如果用户输入的输入值不是uib-typeahead列表的项目（在本例中是数组{{}}，如何禁用按钮{1}}）？当它是数组的项目时启用它吗？

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

中

这是HTML中的输入和按钮：

addedItems

这是<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"];函数在JavaScript中的控制器中定义：

action()

谢谢*

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

我想知道如果用户输入的输入值不是uib-typeahead列表的项目，我该如何禁用按钮（在此   case the Array items）？并在它是数组的项目时启用它吗？

在您的情况下，ui-select符合您的需求。

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

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

这样的东西

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

2 个答案: