Question

我需要使用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) {
	    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

您可以尝试以下方法：

在“新选择”中，您仅推送了员工姓名。我对其进行了更改，以通过在employees数组中找到员工来推动员工的整个对象。
在选定项目的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 个答案: