Angularjsを使用して配列の各項目を数えます

Question

AngularJsを使って、, のような1つの機能を達成したいときは、選択したリストの成分をクリックして1つの成分を追加し、成分は、ちょうどここ

here is my html 
<div ng-app="myApp" ng-controller="addIngredientCtrl"> 
    <div class="ingredient-list"> 
     <h4>INGREDIENT:</h4> 
     <ul ng-repeat="items in item.recipe.IngredientMapping"> 
      <li class="ingredient-list-style"> 
      <img src="http://164.132.196.117/chop_dev/api/AngularJs/images/plus.png" class="plus-size" ng-click="addIngredient(items.Ingredient.name)"> 
      {{items.quantity}} &nbsp; {{items.Unit.name}} &nbsp;{{items.Ingredient.name}} 
      </li> 
     </ul> 
    </div> 
    <div class="selected-list-box"> 
     <div class="selected-list"> 
      <h4>Selected List</h4> 
      <div> 
      <ul ng-repeat="selectedItem in selectedItem track by $index"> 
       <li> 
        {{selectedItem}} 
        <li ng-repeat="(c, n) in results"> {{c}} shows {{n}} times</li> 
       </li> 
      </ul> 

      </div> 
     </div> 

    </div> 

この成分の量を変え、私のjs

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

$scope.selectedItem=Array(); 
$scope.addIngredient= function(param){ 

    $scope.selectedItem.push(param); 

    console.log($scope.selectedItem); 

    $scope.results = {}; 
    for (var i = 0; i < $scope.selectedItem.length; i++) { 
     var selected = $scope.$scope.selectedItem[i]; 
     if(selected) { 
     if ($scope.results.hasOwnProperty(selected)) { 
     $scope.results[selected]++; 
     } else { 
      $scope.results[selected] = 1; 
      } 

     } 
    } 

Answer 1

あなたがライン上で、あなたのコード内で

var selected = $scope.$scope.selectedItem[i]; 

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

 
myApp.controller('addIngredientCtrl', function($scope) { 
 
$scope.item = { 
 
    recipe:{ 
 
    IngredientMapping:[ 
 
     {quantity:1,Unit:{name:'kg'},Ingredient:{name:"onion"}} 
 
    ] 
 
    } 
 
}; 
 
$scope.selectedItem=Array(); 
 
$scope.addIngredient= function(param){ 
 
console.log($scope.selectedItem); 
 
    $scope.selectedItem.push(param); 
 

 
    
 
$scope.results = {}; 
 
    for (var i = 0; i < $scope.selectedItem.length; i++) { 
 
     var selected = $scope.selectedItem[i]; 
 
     if(selected) { 
 
     if ($scope.results.hasOwnProperty(selected)) { 
 
     $scope.results[selected]++; 
 
     } else { 
 
      $scope.results[selected] = 1; 
 
      } 
 

 
     } 
 
    } 
 

 
    
 
    } 
 
});

<style> 
 
    .plus-size{height:16px;} 
 
</style> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="addIngredientCtrl"> 
 
    <div class="ingredient-list"> 
 
     <h4>INGREDIENT:</h4> 
 
     <ul ng-repeat="items in item.recipe.IngredientMapping"> 
 
      <li class="ingredient-list-style"> 
 
      <img src="http://164.132.196.117/chop_dev/api/AngularJs/images/plus.png" class="plus-size" ng-click="addIngredient(items.Ingredient.name)"> 
 
      {{items.quantity}} &nbsp; {{items.Unit.name}} &nbsp;{{items.Ingredient.name}} 
 
      </li> 
 
     </ul> 
 
    </div> 
 
    <div class="selected-list-box"> 
 
     <div class="selected-list"> 
 
      <h4>Selected List</h4> 
 
      <div> 
 
      <ul ng-repeat="selectedItem in selectedItem track by $index"> 
 
       <li> 
 
        {{selectedItem}} 
 
        <li ng-repeat="(c, n) in results"> {{c}} shows {{n}} times</li> 
 
       </li> 
 
      </ul> 
 

 
      </div> 
 
     </div> 
 

 
    </div>

Answer 2

はこれを試してみてくださいされています。私はテストを受けません。しかし、それは動作するはずです。私はarray.reduceメソッドを使用しました。

var arr=[]; 
function arrayCount (array_elements,search) { 
     var count = array_elements.reduce(function(n, val) { 
      return n + (val === search); 
     }, 0); 
     return count; 
} 

    $scope.selectedItem.forEach(function(val){ 
     arr.push({val:val,count:arrayCount($scope.selectedItem,val)}) 
    });