使用 AngularJS 中的 ng-checked（復選框）綁定數組中的所有值

Question

我需要使用復選框綁定人的姓名和年齡，由 ng-repeat 刪除。 我只能從數組中獲取“姓名”，無法從數組中獲取“年齡”，請您找出我的錯誤。 我在 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

你可以試試這個：

在“新選擇”中，您只推送了員工姓名。 我將其更改為通過在員工數組中找到他來推送員工的整個對象。
在選定項目的 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（復選框）綁定數組中的所有值

問題描述

1 個解決方案

解決方案1
2 已采納 2018-11-03 07:02:28

使用 AngularJS 中的 ng-checked（復選框）綁定數組中的所有值

問題描述

1 個解決方案

解決方案1 2 已采納 2018-11-03 07:02:28

解決方案1
2 已采納 2018-11-03 07:02:28