Question

我的视图中有10个（或n个）复选框。现在我试图获取已选中复选框的名称和年龄。

我可以查看复选框员工的姓名和年龄。但是，如果我遇到重复年龄，那么年龄值不会附加到列表中。

我们如何将年龄和名称添加到允许重复项目的不同列表中。

我的代码段在这里：http://jsbin.com/yitosopafo/6/edit?html,js,output

＆＃13;

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=[];
        $scope.ages=[];
		//toggle selection for a given employee by name
		$scope.toggleSelection = function toggleSelection(employeeName,employeeAge) {
	    var idx = $scope.selection.indexOf(employeeName);
          $scope.id=idx;
	    // is currently selected
	    if (idx > -1) {
	      $scope.selection.splice(idx, 1);
          $scope.ages.splice(idx, 1);
	    }
	    // is newly selected
	    else {
	      $scope.selection.push(employeeName);
          $scope.ages.push(employeeAge);
	    }
	  };
      
  
  
});

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="checkBoxController">

  
  <div ng-repeat="employee in employees">
		<input type="checkbox" ng-click="toggleSelection(employee.name,employee.age)" />
				{{employee.name}}

		</div>
  
  <p>Names</p>
  <div ng-repeat="name in selection" class="selected-item">
		{{name}}
		</div>
 
  <p>Ages</p>
  <div ng-repeat="age in ages" class="selected-item">
		{{age}}
		</div>
  
  
</body>
</html>

＆＃13;

谢谢，巴鲁

Answer 1

简单的答案是使用$ index跟踪重复重复值。

在此处阅读更多https://docs.angularjs.org/api/ng/directive/ngRepeat

寻找跟踪和重复

<p>Ages</p>
  <div ng-repeat="age in ages track by $index" class="selected-item">
        {{age}}
        </div>

片段

＆＃13;

var myApp = angular.module('myApp', []);

myApp.controller('checkBoxController', function ($scope) {

        $scope.employeeDetails = [];
		$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=[];
        $scope.ages=[];
		//toggle selection for a given employee by name
		$scope.toggleSelection = function toggleSelection(employeeName,employeeAge) {
	    var idx = $scope.selection.indexOf(employeeName);
          $scope.id=idx;
	    // is currently selected
	    if (idx > -1) {
	      $scope.selection.splice(idx, 1);
          $scope.ages.splice(idx, 1);
	    }
	    // is newly selected
	    else {
	      $scope.selection.push(employeeName);
          $scope.ages.push(employeeAge);
	    }
        
        var obj = {};
      obj[employeeName] = employeeAge ;
     
                 if(angular.element(event.target).attr("checked")=== "checked")
    {
      $scope.employeeDetails.push(obj);
    }
    else
    {
      
 $scope.employeeDetails.map(function(e,ind) {
        
        if(JSON.stringify(e) === JSON.stringify(obj) )
        {
           $scope.employeeDetails.splice(ind, 1);  

        }
        });
      
      
     }
      
	  };
     
});

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="checkBoxController">

  
  <div ng-repeat="employee in employees">
		<input type="checkbox" ng-click="toggleSelection(employee.name,employee.age)" />
				{{employee.name}}

		</div>
  
  <p>Names</p>
  <div ng-repeat="name in selection track by $index" class="selected-item">
		{{name}}
		</div>
 
  <p>Ages</p>
  <div ng-repeat="age in ages track by $index" class="selected-item">
		{{age}}
		</div>
   <div data-ng-if="employeeDetails.length > 0">
    <p>JSON Object</p>
     {{employeeDetails}}
   </div>
  
</body>
</html>

＆＃13;

在角度js中向数组添加重复值时发出问题

1 个答案: