使用Angularjs

时间:2016-08-31 11:42:21

标签: javascript angularjs

我想使用AngularJs实现一个功能,比如please click here to see what i want,   每次点击所选列表中的一个成分已更改并添加一个成分并显示数字,如果重复单击一个成分只需更改此成分的数量

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

        }
    }

2 个答案:

答案 0 :(得分:1)

试试这个。我没有测试过。但它应该工作。我使用了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)})
    });

答案 1 :(得分:0)

你的代码在线上有两次$ scope

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

&#13;
&#13;
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;
             }

        }
    }

    
  }
});
&#13;
<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>
&#13;
&#13;
&#13;