{{}} in ng-click & ng-repeat

Issue

This is the code of my HTML

<div id="container" ng-app="containArea" ng-controller="myCtrl">
<div id="sidebody" class="block">
    <button 
      ng-repeat="shopli in shopName" 
      ng-click="openurl({{'\''+shopli.url+'\''}})" 
      class="btn_shopList">
      {{shopli.name}}
    </button>
</div>
 ........
</div>

And the JS here

var app = angular.module('containArea', []);
app.controller('myCtrl', function($scope) {
    $scope.shopName=[
        {
          "name":'momo購物網',
          "url":'https://buyforfun.biz/2LvEY'
        },
        {
          "name":'金石堂書局',
          "url":'https://joymall.co/2MX4o'
        }
    ]; 
    $scope.openurl = function(url){
         window.open(url, '_blank');
    }
});

The {{shopli.name}} output correctly

But if I click the button , nothing happened

Could anyone help me to fix it

Solution

Use the value directly in ng-click function instead of using angular expression {{}}.

ng-click="openurl('\''+shopli.url+'\'')"

var app = angular.module('containArea', []);
app.controller('myCtrl', function($scope) {
  $scope.shopName = [{
      "name": 'momo購物網',
      "url": 'https://buyforfun.biz/2LvEY'
    },
    {
      "name": '金石堂書局',
      "url": 'https://joymall.co/2MX4o'
    }
  ];
  $scope.openurl = function(url) {
    console.log(url);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="container" ng-app="containArea" ng-controller="myCtrl">
  <div id="sidebody" class="block">
    <button ng-repeat="shopli in shopName" ng-click="openurl(shopli.url)" class="btn_shopList">
      {{shopli.name}}
    </button>
  </div>
</div>

Answered By – Ankit Agarwal

Answer Checked By – Gilberto Lyons (AngularFixing Admin)