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