启用/禁用基于输入验证的按钮
问题描述:
我有这个jsfiddle。有人能帮助我吗? http://jsfiddle.net/ash12/kk1s3a1d/27/启用/禁用基于输入验证的按钮
HTML代码
<div ng-controller="ListController"><br>
 File:
                
  Name:   
  City:<br/>
<input type='file' onchange="angular.element(this).scope().fileNameChanged(this)">
<select name="singleSelect" ng-model="activeItem.content">
<option value="" disabled="" selected="" style="display:none;">Select Name</option>
<option>Rob</option>
<option>Dilan</option>
</select>
<select name="singleSelect1" ng-model="activeItem.content1">
<option value="" disabled="" selected="" style="display:none;">Select City</option>
<option>China</option>
<option>Korea</option>
<option>United States</option>
</select>
<button ng-click="addItem()" ng-disabled="disableAdd">+</button><br><br><br><br>
List:
<ul>
<li ng-repeat="item in items">  <a>{{item.name}}</a>    <a>{{item.content}}</a>
     <a>{{item.content1}}</a>
</li>
</ul>
</div>
JS代码。
function ListController($scope) {
$scope.items = [{
}];
$scope.activeItem = {
name: '',
content: '',
content1:''
}
$scope.fileNameChanged = function(el){
$scope.activeItem.name = el.files[0].name
}
$scope.addItem = function() {
$scope.items.push($scope.activeItem);
if($scope.items.length > 6)
{
$scope.disableAdd = true
}
$scope.activeItem = {} /* reset active item*/
}
}
我希望仅当用户选择所有输入时激活添加按钮。即选择文件并选择下拉值。
目前它不检查验证。它会不断添加,而不管选择的三个选项中的任何一个。我希望它只在所有三个输入都被选中时才添加。任何帮助表示赞赏。
以达到你想要什么需要你的代码
答
两个变化:
- 裹
$scope.activeItem
在$scope.apply()
使页面意识到更改文件的输入。 - 检查
ng-disabled
声明中表单的状态。
进一步的改进:
- 初始化项
[]
代替[{}]
。
建议的解决方案
的jsfiddle:https://jsfiddle.net/bfrola/1z5eejqx/6/
HTML代码(唯一的按钮元件的变化):
<button ng-click="addItem()" ng-disabled="isButtonAddDisabled()">+</button>
JS代码:
function ListController($scope) {
$scope.items = [];
$scope.activeItem = {
name: '',
content: '',
content1:''
}
$scope.fileNameChanged = function(el){
$scope.$apply(function() {
$scope.activeItem.name = el.files[0].name;
});
}
$scope.isButtonAddDisabled = function() {
// Make sure the selection is complete
if (!$scope.activeItem.name ||
!$scope.activeItem.content ||
!$scope.activeItem.content1) {
return true;
}
// Not to many items
if ($scope.items.length > 6)
{
return true;
}
// All ok, not disabled
return false;
}
$scope.addItem = function() {
// Add here further form validations ...
$scope.items.push($scope.activeItem);
$scope.activeItem = {}; /* reset active item*/
}
}
写信DIR ective需要ngModel,然后使用unshift方法根据您的条件将一个有效性变量设置为有效/无效。每当模型更改时调用unshift – vinayakj
@ vinayakj-感谢您的指导。 – Ayesha
如果(所有三个ng模型!= null)ng-disable = false;则可以写入if条件 ng-disable = truel 。 } –