Question

Hello Everyone 我遇到了一些关于我的保存按钮的问题。如果在任何索引中没有输入数据，我想要禁用我的按钮。如果所有索引均为空白，则我的按钮应停用如果其中一个索引已填写，则启用我的按钮

这是我的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);
}
})

请检查并给我一个解决方案提前致谢。

Answer 1

您可以通过将name添加到form和＆＃39;必需＆＃39;来实现。输入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

如果字段未填写ng-repeat，如何禁用按钮？

1 个答案: