如何使用angularjs驗證複選框（必填）？

Question

此頁面列出帶有複選框的商店。我需要把複選框的必填字段，如果沒有在該複選框中選擇我需要把錯誤消息這個字段強制性的，沒有被選中提交按鈕應該禁用，如果用戶在該商店列表中選擇任何一個強制性消息應該消失，並提交按鈕應該是enable.i已經完成，但當我檢查3商店，然後只有消息消失並提交按鈕啓用。 期望值：當用戶選中任何列出的複選框消息應該消失並且提交按鈕應該啓用。如果在該複選框消息中沒有檢查到任何消息，並且提交按鈕應該是混合的。

function Test1Controller($scope) { 
 

 
    var serverData = ["Store1", "Store2", "Store3"]; 
 
    $scope.items = []; 
 

 
    for (var i = 0; i < serverData.length; i++) { 
 
     var modal = { 
 
      name: serverData[i], 
 
      selected: false 
 
     }; 
 
     $scope.items.push(modal); 
 
    } 
 

 
    $scope.check = function() { 
 
     var checkedItems = []; 
 
     for (var i = 0; i < $scope.items.length; i++) { 
 
      if ($scope.items[i].selected) { 
 
       checkedItems.push($scope.items[i].name); 
 
      } 
 
     } 
 
     console.log(checkedItems); 
 
    } 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script> 
 
<div ng-app> 
 
    <form name="projectForm"> 
 
     <div ng-controller="Test1Controller"> 
 
      <div ng-repeat="item in items"> 
 
       <input type="checkbox" ng-model="item.selected" required="" /> {{item.name}} 
 
      </div> 
 
      <div class="form-error" ng-messages="projectForm.booktime.$error"> 
 
       <div class="form-error" ng-message="required">* Mandatory</div> 
 
      </div> 
 
      <input type="button" name="submit" value="submit" ng-disabled="projectForm.$invalid" ng-click="check()" /> 
 
     </div> 
 
</div> 
 
</form>

Answer 1

我在你的代碼調整了一些東西，得到它的工作。

HTML：

<div ng-app="myApp"> 
<form name="projectForm"> 
    <div ng-controller="Test1Controller"> 
     <div ng-repeat="item in items"> 
      <input type="checkbox" ng-model="item.selected" ng-change="itemsChecked()" required="" /> {{item.name}} 
     </div> 
     <div class="form-error" ng-messages="projectForm.booktime.$error"> 
      <div class="form-error" ng-message="required" ng-show="!itemChecked">* Mandatory</div> 
     </div> 
     <input type="button" name="submit" value="submit" ng-disabled="!itemChecked" ng-click="check()" /> 
    </div> 
</form> 

在JavaScript，你沒有正確創建的控制器。您應該先創建一個模塊，然後將控制器連接到模塊，如下所示。

的Javascript：

var app = angular.module("myApp", []); 
app.controller("Test1Controller", function($scope) { 
var serverData = ["Store1", "Store2", "Store3"]; 
$scope.items = []; 

$scope.itemChecked = false; 

for (var i = 0; i < serverData.length; i++) { 
    var modal = { 
     name: serverData[i], 
     selected: false 
    }; 
    $scope.items.push(modal); 
} 

$scope.itemsChecked = function() { 
    $scope.itemChecked = false; 
    for (var i = 0; i < $scope.items.length; i++) 
    { 
     if($scope.items[i].selected) 
     { 
      $scope.itemChecked = true; 
     } 
    } 
} 

$scope.check = function() { 
    var checkedItems = []; 
    for (var i = 0; i < $scope.items.length; i++) { 
     if ($scope.items[i].selected) { 
      checkedItems.push($scope.items[i].name); 
     } 
    } 
    console.log(checkedItems); 
} 
});