通过输入条件禁用/启用按钮 [AngularJS]
Posted
技术标签:
【中文标题】通过输入条件禁用/启用按钮 [AngularJS]【英文标题】:Disable/Enable Button Through Input Conditions [AngularJS] 【发布时间】:2017-11-15 13:13:23 【问题描述】:我正在用 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);
谢谢你*
【问题讨论】:
【参考方案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>
希望对你有帮助!
【讨论】:
谢谢 * 这解决了问题 #2。你知道如何解决问题#1吗? (1.我想知道如果用户输入的输入值不是 uib-typeahead 列表中的项目(在本例中为 Array 项目),我该如何禁用按钮?并在它是项目时启用它数组?) 同时,我做了一些类似的事情来解决我的问题 #2 使用新方法“itemList()”。 HTML Button 现在带有 "ng-disabled="exists(addedItems, search1) || itemList(search1, items)""【参考方案2】:我想知道如果用户输入的输入值不是 uib-typeahead 列表中的项目(在此 以防阵列项目)?并在它是数组的一项时启用它?
在您的情况下,ui-select 将满足您的需求。
另外,当用户尝试通过添加按钮添加一个数组项时,我如何禁用相同的按钮? 添加?这些项目保存在 Array addedItems 中。
有几种方法可以做到这一点。
1. 将ng-change
方法添加到您的输入中,并在该方法中进行唯一检查。然后将唯一的检查结果绑定到按钮中的ng-disabled
。
2. 这将是可重用的,但有点复杂。有一个自定义的唯一检查指令,它接受一个列表和一个输入。并让按钮监听错误。类似ng-disabled="form.search1.$unique"
【讨论】:
“ui-select”如何解决我的问题 #1? (问题 #2 已经解决了) 由于 `'ui-select' 只允许列表中的项目,您不需要禁用该按钮。以上是关于通过输入条件禁用/启用按钮 [AngularJS]的主要内容,如果未能解决你的问题,请参考以下文章