javascript - 将变量值传递给 AngularJs 1.X 中的数组参数

Question

我正在尝试在我的 Angular 应用程序中启动外部网页，我使用的是 Angular 1.4.X 版本。我有一个数组 items，它将被迭代以显示为具有不同图标和名称的 md-buttons。但是我有兴趣通过在同一数组中传递参数来将 url (href) 添加到这些按钮。

HTML:

<md-list-item ng-repeat="item in items">
   <div>
        <md-button target="_self" href={{item.url}} class="md-grid-item-content" ng-click="listItemClick($index)" ng-click="showRemedyGridSheet()">
            <md-icon md-svg-src="{{item.icon}}"></md-icon>
            <div class="md-grid-text"> {{ item.name }} </div>
        </md-button>
    </div>
</md-list-item>

JS:
基于一些逻辑，我构建了 url 字符串并将其分配给 $scope。例如，我使用了以下场景，

$scope.items = [
    { name: 'Rebook', icon: 'rebook' , url:'rebookUrl'},
    { name: 'Puma', icon: 'puma'},
    { name: 'Nike', icon: 'nike' ,url:'nikeUrl'},
    { name: 'NewBalance', icon: 'nb' ,url:'nbUrl'},
  ];

  //build url
  $scope.rebookUrl= "http://www.reebok.co.uk/";
  $scope.nikeUrl= "http://www.nike.com/us/en_us/";
  $scope.nb="http://au.puma.com/";

我如何将 scope.rebookUrl 或 $scope.nb 值传递给数组 $scope.items，然后在 HTML 页面中使用它们以在单击按钮时启动到正确的 url。

Answer 1

首先，不要使用 2 ng-clicks。您可以像这样组合它们:

<md-button target="_self" href="{{$scopeitem.url}}" class="md-grid-item-content"
ng-click="listItemClick($index);showRemedyGridSheet()">
            <md-icon md-svg-src="{{item.icon}}"></md-icon>
            <div class="md-grid-text"> {{ item.name }} </div>
        </md-button>

其次，您可以尝试在作用域变量上使用数组表示法。所以在你的 Controller 中做这样的事情:

$scope.getUrl= function(item){
    return $scope[item.url];
};

然后在您的 HTML 中:

<md-button target="_self" href="{{getUrl(item)}}" class="md-grid-item-content"
ng-click="listItemClick($index);showRemedyGridSheet()">
            <md-icon md-svg-src="{{item.icon}}"></md-icon>
            <div class="md-grid-text"> {{ item.name }} </div>
        </md-button>

抱歉，我现在没有时间在 Plunker 中完成这个