Angular passing values in functions

Question

<div class  = "cate" ng-repeat = "cate in categories" ng-click = "funcCall('{{cate.name}}')"></div>

The above code renders in the dom with the value for {{cate.name}} but when read in function it shows as {{cate.name}}.

How to pass such values and read them in controller functions?

Answer 1

Remove the braces and the quotes inside the ng-click as angular uses the contents that are there before placeholder replacement. Removing the braces and quotes makes it so when the code is evaluated it will look for the variable cate with property name and pass it

var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
    $scope.categories=[
      {name:"test"},
      {name:"test2"},
      {name:"test3"}
    ];
    $scope.funcCall =  function (vm){
        alert(vm);
    };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl">
     <div class  = "cate" ng-repeat = "cate in categories" ng-click = "funcCall(cate.name)">{{cate.name}}</div>
  </div>
</div>

Answer 2

I guess you have to do

  <div class  = "cate" ng-repeat = "cate in categories" ng-click = "funcCall(cate.name)"></div>