Sajjad Tabreez Sajjad Tabreez - 3 years ago 97
AngularJS Question

Can someone please explain me and simplify this particular function addButton() that I have used in angular js



angular.module('myApp',[])
.controller('myController', myController)
.factory('menuCtrlFactory', menuCtrlFactory);

myController.$inject =['menuCtrlFactory'];

function myController(menuCtrlFactory){

var add=this;


var shoppingList= menuCtrlFactory();

add.itemss= shoppingList.getItems();



add.addbutton=function(item){
shoppingList.addbutton(item);

}


}
function menuCtrlService(){
var service= this;

var itemss=[{

dish:'Uthapizza',
category: 'mains',
label:'Hot',
price:'4.99',
description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
comments:[]

},

{

dish:'Uthapizza',
category: 'mains',
label:'Hot',
price:'4.99',
description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
comments:[]

},


];


service.addbutton=function(item){

item.comments.push(item.newComment);
};




service.getItems= function(){
return itemss;
};
}


function menuCtrlFactory(){

var factory= function(){


return new menuCtrlService();
}

return factory;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<meta charset="utf-8">
<script src="angular.min.js"></script>
<title>Shopping Menu</title>
</head>
<body>

<h1>Food Menu</h1>
<div ng-controller="myController as menuList">

<ul>
<li ng-repeat="l in menuList.itemss">
<h2>{{l.dish}}
<span>{{l.label}}</span>
<span>{{l.price | currency}}</span>
</h2>
<p>{{l.category}}</p>
<p>{{l.description}}</p>
<p ng-repeat="comment in l.comments track by $index">{{comment}}</p>
<p>Enter Your Comments: <input type="text" ng-model="l.newComment">
<button ng-click="menuList.addbutton(l);">Add Comments</button></p>
</li>
</ul>
</div>
</body>
</html>





I'm new to angularJS. Actually, this is a example program which I had done.I have understood the code but here in this line of code I'm unable to understand

service.addbutton=function(item){

item.comments.push(item.newComment);
}


Is the "item" used as a function variable. Or can someone explain me what is going inside the function.I'm confused

Answer Source

The item referred to inside the function is the object that was passed into the addbutton function as the input parameter. The line of code inside the function takes the newly added comment and adds it to the list of existing comments.

item.comments.push(item.newComment); is good as is.

But, breaking up that line into multiple lines for readability based on OP's request.

// Get the reference to all existing comments
var existingComments = item.comments;
// Get the reference to the new Comment
var newComment = item.newComment;
// Add new comment to existing comments
existingComments.push(newComment);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download