Passing Angular Expression to a function

Question

I'm new to AngularJS, I was trying a code with ng-repeat but got stuck because I need to pass the angular expression to a function but it is not working below is my code:

HTML code

     <div ng-controller="Profile as pro">
      <ul class="nav nav-tabs">
       <li ng-repeat="tabs in tabArray" 
           ng-class="{active: pro.tab==1}" 
           ng-click=" pro.setTab({{tabs.value}})">
         <a href="">{{tabs.name}}</a>
       </li>
      </ul>
     <div>

Controller code

controller.controller('Profile', ['$scope',function ($scope) {
        $scope.tabArray = [
            {name:"Profile","value":1},
            {name:"Education","value":2},
            {name:"Work","value":3},
            {name:"About","value":4}
        ];
        this.tab=1;
        this.setTab = function(tabSelected){
            this.tab=tabSelected;
        };
     }]);

Sunil Lama · Accepted Answer · 2016-02-27 12:48:28Z

1

Use ng-click ="pro.setTab(tabs.value)"

edited Feb 27, 2016 at 12:48

answered Feb 27, 2016 at 12:40

Sunil Lama

4,5391 gold badge21 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zeeshan Hassan Memon · Accepted Answer · 2016-02-27 13:05:04Z

0

Only proble in your code is in following line:

ng-click=" pro.setTab({{tabs.value}})" // don't use {{ and }} thing here, it is not needed

Following code is fixed version:

ng-click="pro.setTab(tabs.value)" // only {{ and }} are removed and it works well

Happy Helping!

answered Feb 27, 2016 at 13:05

Zeeshan Hassan Memon

8,3654 gold badges47 silver badges60 bronze badges

Comments

Shashank · Accepted Answer · 2016-02-27 13:25:15Z

There were some mistakes in your existing code ->

Since you are making use of ControllerAs syntax, you should refer with the variable used for the controller, with all the variables referenced in the view.

Here, in the ng-repeat of your model refer by pro.tabArray.

There is no need to pass the parameters in AngularExpressions, at the time of function/method call.

So, make use of ng-click="pro.setTab(tabs.value)", without the expressions.

HTML Code:

<li ng-repeat="tabs in pro.tabArray" ng-class="{'active': pro.tab==1}" ng-click="pro.setTab(tabs.value)"><a href="">{{tabs.name}}</a></li>

In your JS too, you have referred some varibales with $scope and some with this. Be consistent with your code and do not mix it.

JS Code:

var app = angular.module('app', []);

app.controller('Profile', function ($scope) {
    this.tabArray = [
              { name: "Profile", "value": 1 },
              { name: "Education", "value": 2 },
              { name: "Work", "value": 3 },
              { name: "About", "value": 4 }
    ];
    this.tab = 1;
    this.setTab = function (tabSelected) {
        this.tab = tabSelected;
    };
    $scope = this;
});

Collectives™ on Stack Overflow

Passing Angular Expression to a function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related