如果字段不是以ng-repeat填充，如何禁用按钮？

大家好我是我正在面对一些关于我的保存按钮的问题。我想要禁用我的按钮，如果没有数据输入任何索引。如果所有指数都是空白的，然后我的按钮应该被禁用如果指数的一个充满然后使我的按钮如果字段不是以ng-repeat填充，如何禁用按钮？

这里是我的Plunkr链接http://plnkr.co/edit/OQxi53xtVKOgToPhzDUZ?p=preview

这里是我的html文件：

<!DOCTYPE html> 
    <html ng-app="myApp"> 
    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4 
    /angular.min.js"> 
    </script> 
    <script src="script.js"></script> 
    `enter code here`</head> 
<body> 
    <form action="#" ng-controller='detailContrller'> 
    <div class="control-group" ng-repeat="story in stories"> <br> 
     <h4> Enter Data </h4> 
     Name : <input type="text" data-ng-model="selection[story].Name1" 
        placeholder="Enter Name"> <br> 
     Address : <input type="text" data-ng-model="selection[story].Name2" 
        placeholder="Enter Address"> <br> 
     City : <input type="text" data-ng-model="selection[story].Name3" 
        placeholder="Enter City"> <br> 
     Phone : <input type="text" data-ng-model="selection[story].Name4" 
        placeholder="Enter Phone "> <br> 
     State : <input type="text" data-ng-model="selection[story].Name5" 
        placeholder="Enter State"> <br> 

    <input type="checkbox" ng-model="selection[story].all" 
     ng-change="updateAll(story)"> 
    <label class="control-label">IncludeAll {{story}}</label> 
     <div class="controls"> 
      <label class="checkbox inline" ng-repeat="browser in browsers"> 
      <input type="checkbox" value="{{browser}}" 
      ng-model="selection[story].browsers[browser]" 
       ng-change="checkChange(browser)" 
      > {{browser}} 
      </label> 
     </div> 
     </div> 
     <button type="button" data-ng-click="save()">Save</button> 
     <pre>{{selection | json}}</pre> 
    </form> 
    </body> 
</html>

控制器

var app = angular.module("myApp",[]); 
app.controller('detailContrller', function($scope){ 

$scope.stories = []; 
$scope.browsers = ['IE', 'Chrome', 'Firefox','Safari','Opera']; 
$scope.selection = {}; 
$scope.details = {}; 
var checked; 
$scope.updateAll = function (story) { 
    checked = $scope.selection[story].all; 
    $scope.browsers.forEach(function (browser) { 
     $scope.selection[story].browsers[browser] = checked; 
    }); 
}; 

for(var i = 0; i< 3; i++) { 
$scope.stories.push(i+1); 
} 
$scope.checkChange = function (browser) { 
    for(var i =0; i< $scope.stories.length; i++){ 
     if(!$scope.stories[i].selected){ 
     $scope.checked = false 
     return false; 
     } 
    } 
} 
angular.forEach($scope.stories, function(storgy) { 
    $scope.selection[storgy] = { 
     browsers: {} 
    }; 
}); 

$scope.save = function() { 
console.log($scope.selection); 
} 
})

请检查并给我一个解决方案在此先感谢。

来源

2014-12-03 Abhishek

您可以通过添加name到form和 '强制' attribute投入和ng-disabled到按钮做到这一点：

<form action="#" ng-controller='detailContrller' name="MyForm"> 
    <div class="control-group" ng-repeat="story in stories"> <br> 
     <h4> Enter Data </h4> 
       Name : <input type="text" data-ng-model="selection[story].Name1" 
          placeholder="Enter Name" required> <br> 
       Address : <input type="text" data-ng-model="selection[story].Name2" 
          placeholder="Enter Address" required> <br> 
       City : <input type="text" data-ng-model="selection[story].Name3" 
          placeholder="Enter City" required> <br> 
       Phone : <input type="text" data-ng-model="selection[story].Name4" 
          placeholder="Enter Phone " required> <br> 
       State : <input type="text" data-ng-model="selection[story].Name5" 
          placeholder="Enter State" required> <br> 

    <input type="checkbox" ng-model="selection[story].all" ng-change="updateAll(story)"> 
    <label class="control-label">IncludeAll {{story}}</label> 
      <div class="controls"> 
       <label class="checkbox inline" ng-repeat="browser in browsers"> 
        <input type="checkbox" value="{{browser}}" ng-model="selection[story].browsers[browser]" ng-change="checkChange(browser)" 
        required > {{browser}} 
        </label> 
       </div> 
     </div> 
    <button type="button" data-ng-click="save()" ng-disabled="MyForm.$invalid">Save</button> 
    <pre>{{selection | json}}</pre> 
</form>

http://plnkr.co/edit/qJjt5bLHbCVnHW5k2XEZ?p=preview

在这里看到的验证部分：

https://docs.angularjs.org/guide/forms

来源

2014-12-03 13:47:54 Rasalom

你好#Rasalom你说得对g是必需的，但是如果其中一个索引被填充，我希望启用我的按钮。在你的情况下需要启用一个按钮来填充所有的索引。所以请给我一个解决方案。 – Abhishek 2014-12-03 13:54:22

好的，我得到了你想要做的，我不认为有内置的解决方案，尝试创建指令，如下所述：http://stackoverflow.com/questions/25180698/angularjs-multiple-forms- with-ng-repeat-validation和模拟内部指令所需的行为，所以它将表现得像单个元素。 – Rasalom 2014-12-03 14:00:26

好吧，我会尝试这个希望它的帮助。如果您有任何其他解决方案，请告诉我。 – Abhishek 2014-12-03 14:04:47

如果字段不是以ng-repeat填充，如何禁用按钮？

回答

相关问题