Reputation: 53
I wanna achieve one function using AngularJs, like this ,
each time click one of ingredient the selected list have changed and add one more ingredient and show the number, if repeat to click one ingredient just change the amount of this ingredient
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}} {{items.Unit.name}} {{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>
here is my 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;
}
}
}
Upvotes: 1
Views: 263
Reputation: 808
you had $scope twice in your code on line
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}} {{items.Unit.name}} {{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>
Upvotes: 0
Reputation: 12113
Try this. I havent tested. But it should work. I have used array.reduce
method.
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)})
});
Upvotes: 1