在ng-click和ng-repeat中使用{{}}

时间:2018-11-22 11:35:25

标签: angularjs angularjs-ng-repeat angularjs-ng-click

这是我的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>

还有JS在这里

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');
    }
});

{{shopli.name}}输出正确

但是,如果我单击该按钮,则什么也没发生

谁能帮我修复它

1 个答案:

答案 0 :(得分:1)

直接在ng-click函数中使用该值,而不要使用角度表达式{{}}

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>