How to add angularJs expression {{}} as a function argument

Question

How can i pass an angular expression "mustache" like this {{dish.id}} to

<button ng-click="singleDish()">

leave a comment

here is my controller code for the button..

$scope.dishId = '0';
$scope.singleDish = function(id){
    $scope.dishId == id;
};
$scope.dish = menuFactory.getDish($scope.dishId);

so when button clicked should

i tried (dish.id) ----- didnt work (doesnt change the scope variable dishId)
    ('{{dish.id}}') didnt work (doesnt change the scope variable dishId)
    ({{dish.id}}) caused an error.

in case there is my whole code ..

menu.html:

            <!DOCTYPE html>
            <html lang="en" ng-app="confusionApp">

            <head>
                 <meta charset="utf-8">
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <!-- The above 3 meta tags *must* come first in the head; any other head
                     content must come *after* these tags -->
                <title>Ristaurant Menu</title>
                  <!-- Bootstrap -->

            <!-- build:css styles/main.css -->
                <!-- Bootstrap -->
              <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
              <link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
              <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
              <link href="styles/bootstrap-social.css" rel="stylesheet">
              <link href="styles/mystyles.css" rel="stylesheet">
            <!-- endbuild -->
                <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
                <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
                <!--[if lt IE 9]>
                  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
                  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
                <![endif]-->
            </head>

            <body>


                <div class="container">
                     <div class="row row-content" ng-controller="MenuController">
                        <div class="col-xs-12"> 
                            <button class="btn btn-xs btn-primary pull-right" ng-click="toggleDetails()">{{showDetails? 'Hide Details' : 'Show Details'}}</button>
                            <span class="pull-right">&nbsp; &nbsp;</span>
                            <button class="btn btn-xs btn-primary pull-right" ng-click="toggleComment()">{{showComment? 'Hide Comments' : 'Show Comments'}}</button>
                          <ul class="nav nav-tabs" role="tablist">
                              <li role="presentation"
                               ng-class="{active:isSelected(1)}">
                                  <a ng-click="select(1)"
                                   aria-controls="all menu"
                                   role="tab">The Menu</a>
                              </li>
                              <li role="presentation"
                               ng-class="{active:isSelected(2)}">
                                  <a ng-click="select(2)"
                                   aria-controls="appetizers"
                                   role="tab">Appetizers</a>
                              </li>
                              <li role="presentation"
                               ng-class="{active:isSelected(3)}">
                                  <a ng-click="select(3)"
                                   aria-controls="mains"
                                   role="tab">Mains</a>
                              </li>
                              <li role="presentation"
                               ng-class="{active:isSelected(4)}">
                                  <a  ng-click="select(4)"
                                  aria-controls="desserts"
                                  role="tab">Desserts</a>
                               </li>
                          </ul>
                        <div class="tab-content">
                            <ul class="media-list tab-pane fade in active">
                                <li class="media" ng-repeat="dish in dishes |filter: filtText">
                                    <div class="row">
                                        <div class="col-xs-2">
                                              <div class="media-left media-middle">
                                                  <a href="#">
                                                  <img class="media-object img-thumbnail"
                                                   ng-src={{dish.image}} alt="Uthappizza">
                                                  </a>
                                              </div>
                                        </div>

                                    <!-- <div class="media-body"> -->
                                        <!-- <div class="row"> -->
                                            <div class="col-xs-10">
                                                <h2 class="media-heading">{{dish.name}}
                                                <span class="label label-danger">{{dish.label}}</span>
                                                <span class="badge">{{dish.price | currency}}</span></h2>
                                                <p ng-show="showDetails">{{dish.description}}</p>
                                            </div>
                                            </div>
                                        <!-- </div> -->
                                        <div class="row">
                                            <div class="col-xs-10 col-xs-offset-1">
                                                <div ng-show="showComment">
                                                    <blockquote class="col-sm-12"ng-repeat = "comment in dish.comment | orderBy : sort">
                                                        <h4>{{comment.comment}}</h4>
                                                        <h5>{{comment.rating}} Stars.</h5>
                                                        <footer>
                                                            <cite title="Source Title">{{comment.author}} @ {{comment.date | date: 'dd MMMM,yyyy'}}</cite>
                                                        </footer>
                                                    </blockquote>
                                                    <p class="leaD"> ID: {{dish.id}} </p>
                                                    <div  ng-controller="DishDetailController">
                                                        <button class="btn btn-default" ng-click="singleDish({{dish.id}})">
                                                            <a href="dishDetail.html"><h4> Leave your Comment </h4></a>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    <!-- </div> -->

                                </li>
                            </ul>
                          </div>
                        </div>
                    </div>
                </div>

                <!-- build:js scripts/main.js -->
              <script src="../bower_components/angular/angular.min.js"></script>
              <script src="scripts/app.js"></script>
              <script src="scripts/controllers.js"></script>
              <script src="scripts/services.js"></script>
            <!-- endbuild -->
            </body>

            </html>

app.js

'use strict';
  angular.module('confusionApp',[]);

Controller.js

                'use strict';
            angular.module('confusionApp')
            .controller('MenuController',['$scope','menuFactory', function($scope, menuFactory) {
              $scope.tab = 1;
              $scope.filtText = '';
              $scope.showDetails = false;

              $scope.dishes = menuFactory.getDishes();

              $scope.select = function(setTab) {
                this.tab = setTab;

                if (setTab === 2) {
                  this.filtText = "appetizer";
                } 
                else if (setTab === 3) {
                  this.filtText = "mains";
                }
                else if (setTab === 4) {
                  this.filtText = "dessert";
                }
                else {
                  this.filtText = "";
                }
              };

              $scope.isSelected = function (checkTab) {
                return (this.tab === checkTab);
              };

              $scope.toggleDetails = function(){
               // !$scope.showDetails? $scope.showDetails = true : $scope.showDetails = false;  ==> Valid solution.
                  $scope.showDetails = !$scope.showDetails;
              };
              $scope.toggleComment = function(){
                  $scope.showComment = !$scope.showComment;
              };
            }])
            .controller('DishDetailController',['$scope','menuFactory',function($scope, menuFactory) {
                $scope.dishId = '0';
                $scope.singleDish = function(id){
                    $scope.dishId == id;
                };
                $scope.dish = menuFactory.getDish($scope.dishId);
                $scope.sort = '';

                $scope.comment = {
                    name: '',
                    stars: '',
                    comment: ''
                };
                $scope.submitComments = function(){
                    $scope.dish.comment.push({
                        rating: $scope.comment.stars,
                        comment: $scope.comment.comment,
                        author: $scope.comment.name,
                        date:Date.now()
                    });
                    $scope.comment = {
                    name: '',
                    stars: '',
                    comment: ''
                };
                    $scope.commentForm.$setPristine();
                };
             }])
            .controller('FeedbackController',['$scope', function ($scope) {

               $scope.feedback = {
                    myChannel:"",
                    firstName: '',
                    lastName: '',
                    agree: false,
                    email: ''
                  };
                $scope.channels = [
                  {
                    value:"tel",
                    label:"Tel."
                  }, {
                    value:"Email",
                    label:"Email"
                  }
                ];
                  $scope.invalidChannelSelection = false;
                // when submit //
                $scope.sendFeedback = function() {
                  console.log($scope.feedback);
                  if ($scope.feedback.agree && ($scope.feedback.myChannel === "")) {
                        $scope.invalidChannelSelection = true;
                        console.log('incorrect');
                  }
                  else {
                        $scope.invalidChannelSelection = false;
                        $scope.feedback = {myChannel:"", firstName:"", lastName:"",
                                           agree:false, email:"" };
                        $scope.feedback.myChannel="";

                        $scope.feedbackForm.$setPristine();
                        console.log($scope.feedback);
                  }
                };
            }])
            /* .controller('CommentsController',['$scope', function($scope){

            }]) */;

services.js

angular.module('confusionApp').service('menuFactory', function(){

var dishes = [
{
  id: 0,
  name:'Uthapizza',
  image: 'images/uthapizza.png',
  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.',
  comment:  [
            {
                   rating:5,
                   comment:"Imagine all the eatables, living in conFusion!",
                   author:"John Lemon",
                   date:"2012-10-16T17:57:28.556094Z"
           },
           {
               rating:4,
               comment:"Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
               author:"Paul McVites",
               date:"2014-09-05T17:57:28.556094Z"
           },
           {
               rating:3,
               comment:"Eat it, just eat it!",
               author:"Michael Jaikishan",
               date:"2015-02-13T17:57:28.556094Z"
           },
           {
               rating:4,
               comment:"Ultimate, Reaching for the stars!",
               author:"Ringo Starry",
               date:"2013-12-02T17:57:28.556094Z"
           },
           {
               rating:2,
               comment:"It's your birthday, we're gonna party!",
               author:"25 Cent",
               date:"2011-12-02T17:57:28.556094Z"
           }
        ]
},
{
  id: 1,
  name:'Zucchipakoda',
  image: 'images/zucchipakoda.png',
  category: 'appetizer',
  label:'',
  price:'1.99',
  description:'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce',
  comment: [
            {
                   rating:5,
                   comment:"Imagine all the eatables, living in conFusion!",
                   author:"John Lemon",
                   date:"2012-10-16T17:57:28.556094Z"
           },
           {
               rating:4,
               comment:"Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
               author:"Paul McVites",
               date:"2014-09-05T17:57:28.556094Z"
           },
           {
               rating:3,
               comment:"Eat it, just eat it!",
               author:"Michael Jaikishan",
               date:"2015-02-13T17:57:28.556094Z"
           },
           {
               rating:4,
               comment:"Ultimate, Reaching for the stars!",
               author:"Ringo Starry",
               date:"2013-12-02T17:57:28.556094Z"
           },
           {
               rating:2,
               comment:"It's your birthday, we're gonna party!",
               author:"25 Cent",
               date:"2011-12-02T17:57:28.556094Z"
           }
        ]
},

{
  id: 2,
  name:'Vadonut',
  image: 'images/vadonut.png',
  category: 'appetizer',
  label:'New',
  price:'1.99',
  description:'A quintessential ConFusion experience, is it a vada or is it a donut?',
  comment: [
            {
                   rating:5,
                   comment:"Imagine all the eatables, living in conFusion!",
                   author:"John Lemon",
                   date:"2012-10-16T17:57:28.556094Z"
           },
           {
               rating:4,
               comment:"Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
               author:"Paul McVites",
               date:"2014-09-05T17:57:28.556094Z"
           },
           {
               rating:3,
               comment:"Eat it, just eat it!",
               author:"Michael Jaikishan",
               date:"2015-02-13T17:57:28.556094Z"
           },
           {
               rating:4,
               comment:"Ultimate, Reaching for the stars!",
               author:"Ringo Starry",
               date:"2013-12-02T17:57:28.556094Z"
           },
           {
               rating:2,
               comment:"It's your birthday, we're gonna party!",
               author:"25 Cent",
               date:"2011-12-02T17:57:28.556094Z"
           }
        ]
},

{
  id: 3,
  name:'ElaiCheese Cake',
  image: 'images/elaicheesecake.png',
  category: 'dessert',
  label:'',
  price:'2.99',
  description:'A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms',
  comment: [
            {
                   rating:5,
                   comment:"Imagine all the eatables, living in conFusion!",
                   author:"John Lemon",
                   date:"2012-10-16T17:57:28.556094Z"
           },
           {
               rating:4,
               comment:"Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
               author:"Paul McVites",
               date:"2014-09-05T17:57:28.556094Z"
           },
           {
               rating:3,
               comment:"Eat it, just eat it!",
               author:"Michael Jaikishan",
               date:"2015-02-13T17:57:28.556094Z"
           },
           {
               rating:4,
               comment:"Ultimate, Reaching for the stars!",
               author:"Ringo Starry",
               date:"2013-12-02T17:57:28.556094Z"
           },
           {
               rating:2,
               comment:"It's your birthday, we're gonna party!",
               author:"25 Cent",
               date:"2011-12-02T17:57:28.556094Z"
           }
        ]
}
  ]; 


this.getDishes = function(){

    return dishes;
};

this.getDish = function(index){

    return dishes[index];
};

});

Thank you in advance.

THank you, I accept that i have a typo == instead of =, but please can u tell me how to assign the {{dish.id}}? — shireef khatab, Jul 05 '16 at 15:49

score 1 · Answer 1 · answered Jul 05 '16 at 10:23

Inside your function you're comparing instead of assigning (== instead of =), this should work:

<button ng-click="singleDish(dish.id)">

$scope.singleDish = function(id){
    $scope.dishId = id; // notice: 1 `=` for assignment
};

More info about comparators/assigners here.

By using = you assign a value to something.

x = 1 //x now equals 1 
x = 2 //x now equals 2

By using == you check if something is equal to something else. This is not strict

x == 1 //is x equal to 1? (False) 
x == 2 //is x equal to 2? (True)
true == 1 //does the boolean value of true equal 1? (True)

By using === you check if something is equal to something else. This is also strict.

x === 1 //is x equal to 1? (False) 
x === 2 //is x equal to 2? (True)
true === 1 //does the boolean value of true equal 1? (False)

What strict does, in case it wasn't clear there, is that it checks not only the equality of the two values, it compares the types of the two values too. Using == will try and convert one side of the expression to be the same type as the other. For example, boolean and integer. The boolean value for true is 1, therefore does 1 equal 1? Yes, true. When using strict however, it does not try and convert before doing the comparison, it checks if true equals 1, which is doesn't as they are two different data types, and returns false.

THank you, I accept that i have a typo == instead of =, but please can u tell me how to assign the {{dish.id}}? — shireef khatab, Jul 05 '16 at 15:20

score 1 · Answer 2 · edited May 23 '17 at 12:14

1

Just pass the variable directly to the method like this and use '=' operator. == and === are for comparisons. Read more here: Which equals operator (== vs ===) should be used in JavaScript comparisons?

<button ng-click="singleDish(dish.id)">

Controller

 $scope.singleDish = function(id){
  console.log('Here is the id ' + id);
 };

edited May 23 '17 at 12:14

Community

1
1

answered Jul 05 '16 at 11:28

Srijith

1,434
9
14

THank you, I accept that i have a typo == instead of =, but please can u tell me how to assign the {{dish.id}}? – shireef khatab Jul 05 '16 at 15:19
in your answer yu are doing : singleDish (id) what is id here? – shireef khatab Jul 05 '16 at 15:19
@shireefkhatab i assume you are looping over dishes ? I guess its `dish.id` then – Martijn Welker Jul 05 '16 at 15:22
that's exactly what i have above in my code.. but it doesnt affect the $scope.dishId – shireef khatab Jul 05 '16 at 15:28
doesnt it need a mustache??{{}} – shireef khatab Jul 05 '16 at 15:29
Nope. No mustache necessary! Just pass the id like in the code – Srijith Jul 05 '16 at 16:04
Ok,thanks .. that makes sense.. but why it is not doing the job? – shireef khatab Jul 05 '16 at 21:45
can you post a plunker? – Srijith Jul 06 '16 at 03:51

How to add angularJs expression {{}} as a function argument

2 Answers2