使用Angularjs對陣列中的每個項目進行計數

Question

我想要使用AngularJs實現一個功能，就像這樣, 每次點擊一個成分時所選擇的列表已經改變並添加一個成分並顯示數字，如果重複點擊一個成分只是改變這種成分

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)}) 
    });