如何在任何索引字段中验证 ng-repeat 中的保存按钮。？答案

【问题标题】：How to validate Save button in ng-repeat in any Index is field.?如何在任何索引字段中验证 ng-repeat 中的保存按钮。？
【发布时间】：2015-01-09 23:21:01
【问题描述】：

大家好我在保存按钮验证方面遇到问题。如果任何索引已完全填充，我想验证我的按钮。我的 Save 按钮 enable/disabled 或 validate 在最后索引的情况下正确按钮。如果填充了最后一个索引，则保存按钮可以正常工作，但如果是另一个索引，则它不能正常工作。

这是我的 Plunkr 链接： http://plnkr.co/edit/IlBKTAmNBtrI79Kz8thf?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>
 </head>
  <body>
      <form action="#" ng-controller='detailContrller'>
      <div class="control-group" ng-repeat="story in stories"> <br>
           <h4> Enter data in List  {{$index + 1}} </h4>
             Name :  <input type="text" data-ng-model="story.Name1" 
                        placeholder="Enter Name">  <br>
            Address :  <input type="text" data-ng-model="story.Name2" 
                        placeholder="Enter Address">  <br>
          City :    <input type="text" data-ng-model="story.Name3"
                        placeholder="Enter City">  <br>
          Phone :  <input type="text" data-ng-model="story.Name4" 
                        placeholder="Enter Phone ">  <br>
          State :  <input type="text" data-ng-model="story.Name5" 
                        placeholder="Enter State">  <br>

      <input type="checkbox" ng-model="story.all" ng-change="updateAll($index)">
      <label class="control-label">IncludeAll</label>
        <div class="controls">
            <label class="checkbox inline" ng-repeat="browser in browsers">
                <input type="checkbox" value="{{browser}}"
                  ng-model="story.browser[browser]">{{browser}}
            </label>
        </div>
    </div>
      <button type="button" data-ng-click="save()" data-ng-disabled="saveBtnDisabled" >
      Save</button>
      <pre>{{story | 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.saveBtnDisabled = true;

 var checked;
 $scope.updateAll = function (index) {
    checked = $scope.stories[index].all;
    $scope.browsers.forEach(function (browser) {
        $scope.stories[index].browser[browser] = checked;
    });
 };

 for(var i = 0; i< 3; i++) {
     $scope.stories.push({Name1: "", Name2: "", Name3:"", Name4: "", Name5:"", all: "",
     browser:{}});
 }

 $scope.$watch('stories', function (newVal, oldVal) {
   for(var i in newVal) {
       var count = 0, keyCount = 0, selected = newVal[i];
       angular.forEach(selected, function(value, p) {
          if (value) {
              count++;
          }
          keyCount ++;
      })
      if (count === keyCount && count >= 6) {
          $scope.saveBtnDisabled = false;

      }  else if (count !== keyCount && count <= 6) {
          $scope.saveBtnDisabled = true;

      }
   }
  },true);

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

【问题讨论】：

标签： javascript angularjs html validation angularjs-ng-repeat

【解决方案1】：

您的代码的相关更改位于 $scope.watch 函数中。

这里是 JSFiddle： http://jsfiddle.net/1k1e6xxb/

HTML：

<div ng-app="myApp">
    <form action="#" ng-controller='detailContrller'>
        <div class="control-group" ng-repeat="story in stories"> <br>
            <h4> Enter data in List  {{$index + 1}} </h4>
            Name :  <input type="text" data-ng-model="story.Name1" 
            placeholder="Enter Name">  <br>
            Address :  <input type="text" data-ng-model="story.Name2" 
            placeholder="Enter Address">  <br>
            City :    <input type="text" data-ng-model="story.Name3"
            placeholder="Enter City">  <br>
            Phone :  <input type="text" data-ng-model="story.Name4" 
            placeholder="Enter Phone ">  <br>
            State :  <input type="text" data-ng-model="story.Name5" 
            placeholder="Enter State">  <br>

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

JavaScript：

var app = angular.module("myApp", []);

app.controller('detailContrller', function($scope) {

    $scope.stories = [];
    $scope.browsers = ['IE', 'Chrome', 'Firefox', 'Safari', 'Opera'];
    $scope.saveBtnDisabled = true;

    var checked;
    $scope.updateAll = function(index) {
        checked = $scope.stories[index].all;
        $scope.browsers.forEach(function(browser) {
            $scope.stories[index].browser[browser] = checked;
        });
    };

    for (var i = 0; i < 3; i++) {
        $scope.stories.push({
            Name1: "",
            Name2: "",
            Name3: "",
            Name4: "",
            Name5: "",
            all: "",
            browser: {}
        });
    }

    $scope.$watch('stories', function(newVal, oldVal) {
        var canSave = false;

        angular.forEach(newVal, function (list, listNumber) {
            var fieldCount = 0,
                filledCount = 0;

            angular.forEach(list, function (fieldValue, fieldIndex) {
                if (fieldValue) {
                    filledCount++;
                }
                fieldCount++;
            });
            if (!canSave && fieldCount === filledCount) {
                canSave = true;
            }
        });

        if (canSave) {
            $scope.saveBtnDisabled = false;
        } else {
            $scope.saveBtnDisabled = true;
        }
    },
    true);

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

【讨论】：

感谢#Trimegistus 帮助我。