角度jsの配列に重複値を追加する際の問題

私のビューには10個（またはn個）のチェックボックスがあります。今私はチェックされたチェックボックスの名前と年齢を取得しようとしていました。角度jsの配列に重複値を追加する際の問題

チェックボックスの従業員の名前と年齢が確認できます。しかし、年齢が重複している場合は、年齢の値はリストに追加されません。

重複したアイテムを許可する年齢や名前を別のリストに追加する方法。

私のコードスニペットはここにある：http://jsbin.com/yitosopafo/6/edit?html,js,output

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

 
myApp.controller('checkBoxController', function ($scope) { 
 
\t \t $scope.employees=[{name:'John', age:25, gender:'boy'}, 
 
\t \t \t \t \t \t \t {name:'Jessie', age:30, gender:'girl'}, 
 
\t \t \t \t \t \t \t {name:'Johanna', age:28, gender:'girl'}, 
 
\t \t \t \t \t \t \t {name:'Joy', age:15, gender:'girl'}, 
 
\t \t \t \t \t \t \t {name:'Mary', age:28, gender:'girl'}, 
 
\t \t \t \t \t \t \t {name:'Peter', age:95, gender:'boy'}, 
 
\t \t \t \t \t \t \t {name:'Sebastian', age:50, gender:'boy'}, 
 
\t \t \t \t \t \t \t {name:'Erika', age:27, gender:'girl'}, 
 
\t \t \t \t \t \t \t {name:'Patrick', age:40, gender:'boy'}, 
 
\t \t \t \t \t \t \t {name:'Samantha', age:60, gender:'girl'}]; 
 
\t \t $scope.selection=[]; 
 
     $scope.ages=[]; 
 
\t \t //toggle selection for a given employee by name 
 
\t \t $scope.toggleSelection = function toggleSelection(employeeName,employeeAge) { 
 
\t  var idx = $scope.selection.indexOf(employeeName); 
 
      $scope.id=idx; 
 
\t  // is currently selected 
 
\t  if (idx > -1) { 
 
\t  $scope.selection.splice(idx, 1); 
 
      $scope.ages.splice(idx, 1); 
 
\t  } 
 
\t  // is newly selected 
 
\t  else { 
 
\t  $scope.selection.push(employeeName); 
 
      $scope.ages.push(employeeAge); 
 
\t  } 
 
\t }; 
 
     
 
    
 
    
 
});

<!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"> 
 
\t \t <input type="checkbox" ng-click="toggleSelection(employee.name,employee.age)" /> 
 
\t \t \t \t {{employee.name}} 
 

 
\t \t </div> 
 
    
 
    <p>Names</p> 
 
    <div ng-repeat="name in selection" class="selected-item"> 
 
\t \t {{name}} 
 
\t \t </div> 
 
    
 
    <p>Ages</p> 
 
    <div ng-repeat="age in ages" class="selected-item"> 
 
\t \t {{age}} 
 
\t \t </div> 
 
    
 
    
 
</body> 
 
</html>

おかげで、 Balu

出典

2016-07-14 Balanjaneyulu K

簡単な答えは重複する値を繰り返す$インデックスでトラックを使用することです。もっとここに

読む追跡のための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>

スニペット

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

 
myApp.controller('checkBoxController', function ($scope) { 
 

 
     $scope.employeeDetails = []; 
 
\t \t $scope.employees=[{name:'John', age:25, gender:'boy'}, 
 
\t \t \t \t \t \t \t {name:'Jessie', age:30, gender:'girl'}, 
 
\t \t \t \t \t \t \t {name:'Johanna', age:28, gender:'girl'}, 
 
\t \t \t \t \t \t \t {name:'Joy', age:15, gender:'girl'}, 
 
\t \t \t \t \t \t \t {name:'Mary', age:28, gender:'girl'}, 
 
\t \t \t \t \t \t \t {name:'Peter', age:95, gender:'boy'}, 
 
\t \t \t \t \t \t \t {name:'Sebastian', age:50, gender:'boy'}, 
 
\t \t \t \t \t \t \t {name:'Erika', age:27, gender:'girl'}, 
 
\t \t \t \t \t \t \t {name:'Patrick', age:40, gender:'boy'}, 
 
\t \t \t \t \t \t \t {name:'Samantha', age:60, gender:'girl'}]; 
 
\t \t $scope.selection=[]; 
 
     $scope.ages=[]; 
 
\t \t //toggle selection for a given employee by name 
 
\t \t $scope.toggleSelection = function toggleSelection(employeeName,employeeAge) { 
 
\t  var idx = $scope.selection.indexOf(employeeName); 
 
      $scope.id=idx; 
 
\t  // is currently selected 
 
\t  if (idx > -1) { 
 
\t  $scope.selection.splice(idx, 1); 
 
      $scope.ages.splice(idx, 1); 
 
\t  } 
 
\t  // is newly selected 
 
\t  else { 
 
\t  $scope.selection.push(employeeName); 
 
      $scope.ages.push(employeeAge); 
 
\t  } 
 
     
 
     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); 
 

 
     } 
 
     }); 
 
     
 
     
 
    } 
 
     
 
\t }; 
 
     
 
});

<!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"> 
 
\t \t <input type="checkbox" ng-click="toggleSelection(employee.name,employee.age)" /> 
 
\t \t \t \t {{employee.name}} 
 

 
\t \t </div> 
 
    
 
    <p>Names</p> 
 
    <div ng-repeat="name in selection track by $index" class="selected-item"> 
 
\t \t {{name}} 
 
\t \t </div> 
 
    
 
    <p>Ages</p> 
 
    <div ng-repeat="age in ages track by $index" class="selected-item"> 
 
\t \t {{age}} 
 
\t \t </div> 
 
    <div data-ng-if="employeeDetails.length > 0"> 
 
    <p>JSON Object</p> 
 
    {{employeeDetails}} 
 
    </div> 
 
    
 
</body> 
 
</html>

出典

2016-07-14 08:44:08 Deep

こんにちは深いです。ありがとうございました。オプションでトラックを使用すると、値を表示できます。しかし、私は名前と私のASP.NET.Canで選択されたチェックボックスの年齢を使用する必要がありますどのように名前を取得し、キー値のペアとして助けてください –

あなたはキー値として名前と年齢を意味するのですか？ {"john"： "25"} – Deep

はい深いです。あなたは正しいです。 –

角度jsの配列に重複値を追加する際の問題

答えて

関連する問題