Question

如何使用AngularJS绑定复选框列表并使用ng-reapet方法从复选框中获取所有选定值？

我尝试在角度控制器中获取所选复选框的值。

查看

<ul class="to_do">
    <li ng-repeat="form in ManagementScreenModel.Forms">
        <!--<input type="checkbox" ng-model="RoleData.formUrl" value="{{form.Value}}" id="{{form.Value}}">-->

        <input type="checkbox"
               ng-model="RoleData.selectedForms"
               data-checklist-model="RoleData.ManagementScreenModel.Forms"
               data-checklist-value="{{form.Value}}"
               id="{{form.Value}}">

        {{form.Text}}
    </li>
</ul>

控制器

$scope.SetUserpermision = function() {
    Get(
        "/Home/GetAvailableForms",
        null,
        function(result) {},
        function(result) {
            userforms = result;
            //$scope.GetUserForms = json.parse(result);
        },
        null
    );

    Post(
        "/ManagementScreen/SetAccess",
        $scope.RoleData.userforms,
        function OnError(jqXHR, testStatus, errorThrown) {
            // display error here
        },
        function (result) {
            var response = JSON.parse(result);
            if (response != null && response.StatusCode === 200) {
                //alert("User email change successfully");
            }
        },
        null
    );
}

Answer 1

在ManagementScreenModel.Forms中有一个布尔变量（例如＆＃39;已选中＆＃39;）并且在提交表单检查变量后，是否检查该条目。

HTML

<md-checkbox ng-model="user.checked" aria-label="Checkbox 1"></md-checkbox>

JS

    angular.forEach($scope.users, function(user, i) {
     if(user.checked === true){
//store in an array
}
});

<强>演示 https://plnkr.co/edit/MTyDSrXCZXlJXVHcyrCV?p=preview

Answer 2

var app = angular.module("myapp", []);
app.controller("myCtrl", ['$scope', function($scope) {
  $scope.roles = [
    'Nitin', 
    'Parag', 
    'Pravin', 
    'Sandeep',
    'Praful'
  ];
 $scope.items=[];
   $scope.addOrRemove = function (selectedItems,b) {         
      
     if(b==true)
       $scope.items.push(selectedItems);
     else
       {
       var index = $scope.items.indexOf(selectedItems);
           $scope.items.splice(index,1);
       }
     
      };
  
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">  
  <div ng-controller="myCtrl">
   <label ng-repeat="role in roles">
  <input type="checkbox" ng-model="user.roles"  ng-value="role"  ng-click="addOrRemove(role,!user.roles)" ng-init="user.roles=false;"  > {{role}}
</label>
  
  <br/> <br/> <br/>
    
    {{items}}
  </div>
  
</div>

如何使用Angular绑定复选框列表，并使用ng-reapet方法从复选框中获取所有选定的值

2 个答案: