在 AngularJS 中使用 ng-checked（复选框）绑定数组中的所有值

Question

我需要使用复选框绑定人的姓名和年龄，由 ng-repeat 删除。我只能从数组中得到"name"，我不能从数组中得到"age"，你能找出我的错误吗？我已将所有代码附加到 Snippet 中。提前致谢。

另外附上图片请参考

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

myApp.controller('checkBoxController', function ($scope) {
  $scope.employees=[{name:'John', age:25, gender:'boy'},
       {name:'Jessie', age:30, gender:'girl'},
       {name:'Johanna', age:28, gender:'girl'},
       {name:'Joy', age:15, gender:'girl'},
       {name:'Mary', age:28, gender:'girl'},
       {name:'Peter', age:95, gender:'boy'},
       {name:'Sebastian', age:50, gender:'boy'},
       {name:'Erika', age:27, gender:'girl'},
       {name:'Patrick', age:40, gender:'boy'},
       {name:'Samantha', age:60, gender:'girl'}];
  $scope.selection=[];
  // toggle selection for a given employee by name
  $scope.toggleSelection = function toggleSelection(employeeName) {
     var idx = $scope.selection.indexOf(employeeName);

     // is currently selected
     if (idx > -1) {
       $scope.selection.splice(idx, 1);
     }

     // is newly selected
     else {
       $scope.selection.push(employeeName);
     }
   };
});

<html ng-app="myApp">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
</head>
<body>
<div class="panel" ng-controller="checkBoxController">
 <div class="check-box-panel">
  <div ng-repeat="employee in employees">
   <div class="action-checkbox">
    <input id="{{employee.name}}" type="checkbox" value="{{employee.name}}" ng-checked="selection.indexOf(employee.name) > -1" ng-click="toggleSelection(employee.name)" />
    <label for="{{employee.name}}"></label>
    {{employee.name}}
    {{employee.age}}
   </div>
  </div>
 </div>
 <div class="selected-items-panel">
 <span  class="selected-item">Selected Items:<span>
  <div ng-repeat="name in selection" class="selected-item">
  [<span>Name: {{name}} </span>, <span>age: {{age}} </span>]
  </div>
 </div>
</div>
</body>
</html>

Answer 1

你可以试试这个：

在 'is newly selected' 中，您只推送了员工姓名。我将其更改为通过在员工数组中找到他来推送员工的整个对象。
在所选项目的 ng-repeat 中，我运行所有员工并打印其数据。

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

myApp.controller('checkBoxController', function ($scope) {
  $scope.employees=[{name:'John', age:25, gender:'boy'},
       {name:'Jessie', age:30, gender:'girl'},
       {name:'Johanna', age:28, gender:'girl'},
       {name:'Joy', age:15, gender:'girl'},
       {name:'Mary', age:28, gender:'girl'},
       {name:'Peter', age:95, gender:'boy'},
       {name:'Sebastian', age:50, gender:'boy'},
       {name:'Erika', age:27, gender:'girl'},
       {name:'Patrick', age:40, gender:'boy'},
       {name:'Samantha', age:60, gender:'girl'}];
  $scope.selection=[];
  // toggle selection for a given employee by name
  $scope.toggleSelection = function toggleSelection(employeeName) {
     const idx = $scope.selection.findIndex(employee => employee.name === employeeName);

     // is currently selected
     if (idx > -1) {
       $scope.selection.splice(idx, 1);
     }

     // is newly selected
     else {
      const employee = $scope.employees.find(employee => employee.name === employeeName);
       $scope.selection.push(employee);
     }
   };
});

<html ng-app="myApp">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
</head>
<body>
<div class="panel" ng-controller="checkBoxController">
 <div class="check-box-panel">
  <div ng-repeat="employee in employees">
   <div class="action-checkbox">
    <input id="{{employee.name}}" type="checkbox" value="{{employee.name}}" ng-checked="selection.indexOf(employee.name) > -1" ng-click="toggleSelection(employee.name)" />
    <label for="{{employee.name}}"></label>
    {{employee.name}}
   </div>
  </div>
 </div>
 <div class="selected-items-panel">
 <span  class="selected-item">Selected Items:<span>
  <div ng-repeat="employee in selection" class="selected-item">
  [<span>Name: {{employee.name}} </span>, <span>age: {{employee.age}} </span>]
  </div>
 </div>
</div>
</body>
</html>

在 AngularJS 中使用 ng-checked（复选框）绑定数组中的所有值

Bind all values from array using ng-checked (checkbox) in AngularJS

html

javascript

angularjs

angularjs-scope