禁用按钮在使用ng禁用时不起作用

最初，按钮的值被禁用，因为按钮的值为true，所以按钮被禁用。现在选择复选框后，按钮应该能够单击。但它是不能够点击：禁用按钮在使用ng禁用时不起作用

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 
<body> 
 

 
    <div ng-app="myApp" ng-controller="myCtrl"> 
 

 
    <input type="checkbox" ng-model="formData.week[0]" ng-true-value="'a'">a 
 
    <input type="checkbox" ng-model="formData.week[1]" ng-true-value="'s'">s 
 
    <input type="checkbox" ng-model="formData.week[2]" ng-true-value="'d'">d 
 
    <input type="checkbox" ng-model="formData.week[3]" ng-true-value="'f'">f 
 
    <input type="checkbox" ng-model="formData.week[4]" ng-true-value="'g'">g 
 
    <input type="submit" ng-disabled='!formData.week.length' ng-click=a(formData)> 
 
    </div> 
 

 
    <script> 
 
    var app = angular.module('myApp', []); 
 
    app.controller('myCtrl', function($scope) { 
 
     $scope.a = function(x) { 
 
     console.log(x); 
 
     a = [1, 2, 3]; 
 
     console.log(a); 
 
     } 
 
    }); 
 
    </script> 
 

 
</body> 
 

 
</html>

来源

2017-03-22 abhi

你的NG-禁用始终检查长度。但实际上您需要检查复选框的布尔值以满足您尝试实现的场景。

我已经更新了你的代码下面的代码

<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<body> 

<div ng-app="myApp" ng-controller="myCtrl"> 

<input type="checkbox" ng-model="formData.week[0]" ng-true-value="'a'">a 
<input type="checkbox" ng-model="formData.week[1]" ng-true-value="'s'">s 
<input type="checkbox" ng-model="formData.week[2]" ng-true-value="'d'">d 
<input type="checkbox" ng-model="formData.week[3]" ng-true-value="'f'">f 

<input type="checkbox" ng-model="formData.week[4]" ng-true-value="'g'">g 


<input type="submit" ng-disabled='formData.week[0]==false && 

formData.week[1]==false && 
formData.week[2]==false && 
formData.week[3]==false && 
formData.week[4]==false 



' ng-click=a(formData)> 
</div> 

<script> 
var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope) { 
$scope.formData = {} 
$scope.formData.week = [] 
$scope.formData.week[0]=false; 
$scope.formData.week[1]=false; 
$scope.formData.week[2]=false; 
$scope.formData.week[3]=false; 
$scope.formData.week[4]=false; 


    }); 
</script> 

</body> 
</html>

来源

2017-03-22 10:15:33

我刚刚在控制器中添加了一些值，因为你没有完全提供它们，只需复制粘贴代码，它就会工作 –

变化ng-disabled='!formData.week.length'

到

ng-disabled='!(!!formData.week[0] || !!formData.week[1] || !!formData.week[2] || !!formData.week[3] || !!formData.week[4])'

退房的工作示例：https://plnkr.co/edit/JOARO1NwgunCw5Zcyvpo?p=preview

来源

2017-03-22 10:16:03 Syed

其实有东西了解

<div ng-app="myApp" ng-controller="myCtrl"> 

    <input type="checkbox" ng-model="formData.week[0]" ng-true-value="'a'">a 
    <input type="checkbox" ng-model="formData.week[1]" ng-true-value="'s'">s 
    <input type="checkbox" ng-model="formData.week[2]" ng-true-value="'d'">d 
    <input type="checkbox" ng-model="formData.week[3]" ng-true-value="'f'">f 
    <input type="checkbox" ng-model="formData.week[4]" ng-true-value="'g'">g 
    <input type="submit" ng-disabled='!formData.week.length' ng-click=a(formData)> 
</div>

所以，当你应用NgModel为formData.week[0]这样就会形成范围变量formData类似的东西

{ 
    "week" :{"0":true,"1" : true", "2" : "false" 
}

因为你还没有宣布formData.week作为数组。因此，对长度进行检查这个对象，你需要做出这样

<input type="submit" ng-disabled='!checkLength()' ng-click=a(formData)>

函数的功能将类似于

$scope.checkLength = function(){ 
    if($scope.formData && $scope.formData.week && Object.keys($scope.formData.week).length > 0) 
    return true; 
    else 
    return false; 
}

而且如果你想要的按钮只有当启用任何复选框的是真实的。那么你可能会修改该功能

$scope.checkLength = function(){ 
if($scope.formData && $scope.formData.week && Object.keys($scope.formData.week).length > 0) { 
    var point = 0; 
    for(var i=0;i< Object.keys($scope.formData.week).length;i++){ 
     if($scope.formData.week[i] == true){ 
     point++; 
     break; 
     } 
    } 
    if(point>0) return true; 
    else return false; 
} 
else 
    return false; 
}

来源

2017-03-22 10:59:02

禁用按钮在使用ng禁用时不起作用

回答

相关问题