Question

我有一个小程序，我有3个复选框。我可以检查任何或所有复选框。我需要提醒我已经检查过复选框的人员名字。

HTML：

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<table>
    <tr ng-repeat="(key,x) in People">
        <td><input type="checkbox" id="{{x.id}}" >{{x.name}}</td>
    </tr>
</table>
<button ng-click="alert()">Click</button>
<script>
//Module Declaration
var app = angular.module('myApp',[]);
//Controller Declaration
app.controller('myCtrl',function($scope){
    $scope.checkboxArray = [];
    $scope.People = [
        {name:"Peter",id:"201"},
        {name:"Lina",id:"202"},
        {name:"Roger",id:"203"}
    ];
    //alert function 
    $scope.alert = function(){
        angular.forEach($scope.People, function(val,key) {
            if('#val.id:checked'){
                $scope.checboxArray + = $scope.People[key].name;
            }
            alert($scope.checkboxArray);
        }
    }

});
</script>
</body> 
</html>

我不确定我是否正确地将条件置于if（）条件下。有人可以帮忙吗？

Answer 1

您需要使用ng-model存储已检查状态，如下所示，然后使用People数组找到已检查的项目

＆＃13;

var app = angular.module('my-app', [], function() {})

app.controller('AppController', function($scope) {
  $scope.checkboxArray = [];
  $scope.People = [{
    name: "Peter",
    id: "201"
  }, {
    name: "Lina",
    id: "202"
  }, {
    name: "Roger",
    id: "203"
  }];
  //alert function 
  $scope.alert = function() {
    var selected = $scope.People.filter(function(item) {
      return item.checked
    }).map(function(item) {
      return item.name;
    })
    alert(selected);
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app">
  <div ng-controller="AppController">
    <table>
      <tr ng-repeat="(key,x) in People">
        <td>
          <input ng-model="x.checked" type="checkbox" id="{{x.id}}">{{x.name}}</td>
      </tr>
    </table>
    <button ng-click="alert()">Click</button>
    <pre>{{People}}</pre>
  </div>
</div>

＆＃13;

Answer 2

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<table>
    <tr ng-repeat="(key,x) in People">
        <td><input type="checkbox" id="{{x.id}}" ng-model="x.checked">{{x.name}}</td>
    </tr>
</table>
<button ng-click="alert()">Click</button>
<script>
//Module Declaration
var app = angular.module('myApp',[]);
//Controller Declaration
app.controller('myCtrl',function($scope){
    $scope.checkboxArray = [];
    $scope.People = [
        {name:"Peter",id:"201", checked : false},
        {name:"Lina",id:"202", checked : false},
        {name:"Roger",id:"203", checked : false}
    ];
    //alert function 
    $scope.alert = function(){
        angular.forEach($scope.People, function(val,key) {
            if(val.checked){
                $scope.checboxArray.push(val.name);
            } else{
               alert(val.name ," is not checked");
            }
        }
    }

});
</script>
</body> 
</html>

Answer 3

此处为您的问题提供了JSFIDDLE。

正如Arun所提到的，最简单的方法是使用ng-model获取检查值。

我更新了您之前的代码并添加了我的解决方案：

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<table>
    <tr ng-repeat="x in People">
     <td>
             <input type="checkbox" ng-model="x.checked" id="{{x.id}}" >{{x.name}}<br/> 
     </td>

    </tr>
</table>
<button ng-click="doAction()">Click</button>
<script>
//Module Declaration
var app = angular.module('myApp',[]);
//Controller Declaration
app.controller('myCtrl',function($scope){
    $scope.People = [
        {name:"Peter",id:"201", checked:"false"},
        {name:"Lina",id:"202", checked:"false"},
        {name:"Roger",id:"203", checked:"false"}
    ];
    $scope.doAction = function() {
        for(var x = 0;x < $scope.People.length;x++)
        {
            if ($scope.People[x].checked == true)
            alert($scope.People[x].name);
        }
    }
});
</script>
</body> 
</html>

警告在ng-Repeat：AngularJS中检查的所有复选框

3 个答案: