Привязать все значения из массива с помощью ng-checked (checkbox) в AngularJS - PullRequest
Новая
       14

Привязать все значения из массива с помощью ng-checked (checkbox) в AngularJS

0 голосов
/ 03 ноября 2018

Мне нужно связать имя и возраст человека с помощью флажка, отмеченного ng-repeat. Я могу получить только "имя" из массива, я не могу получить "возраст" из массива, не могли бы вы узнать мою ошибку. Я приложил весь код в сниппете. Заранее спасибо.

Также я прикрепил изображение, пожалуйста, отошлите его.

enter image description here

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>

1 Ответ

0 голосов
/ 03 ноября 2018

Вы можете попробовать это:

  1. в 'вновь выбран', вы указали только имя сотрудника. Я изменил его, чтобы выдвинуть весь объект сотрудника, найдя его в массиве сотрудников.
  2. в ng-repeat of selected-item я запускаю всех сотрудников и печатаю его данные. 

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>
...