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

【问题标题】：Pass variable value to array arguments in AngularJs 1.X将变量值传递给 AngularJs 1.X 中的数组参数
【发布时间】：2016-11-23 00:04:21
【问题描述】：

我正在尝试在我的 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。

【问题讨论】：

在 items 数组中直接传递 url 有什么问题？
将两个ng-click 指令放在一个元素上是行不通的。第二个ng-click 指令将被忽略。

标签： javascript angularjs scope rootscope

【解决方案1】：

首先，不要使用 2 次 ng-click。你可以像这样组合它们：

<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>

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

$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 中搞定这个

【讨论】：

不用担心，感谢您的帮助。非常感谢。
您建议如何为每个项目调用 getUrl ？如果在 ng-repeat 之外使用，我认为它不会迭代？
我真的很想摆脱 getUrl 函数，但我不确定访问 HTML 中的 $scope 变量。更好的方法是将所有 URL 放在 $scope.urls 之类的对象上。然后你可以使用 urls[item.ur] 代替函数。
所以这将是与 $scope.items 不同的对象，如果是这样，我必须选择索引值。但我不认为它解决了从$scope.rebookUrl 等检索值的主要问题

【解决方案2】：

您快到了，但您的代码存在三个小问题：

正如@georgeawg 所指出的，您不能在同一个元素上声明两个ng-click 属性。您可以简单地调用这两个函数：ng-click="listItemClick($index); showRemedyGridSheet();"。或者，您也可以将 showRemedyGridSheet() 调用移动到 listItemClick 定义中。
您必须先声明并初始化$scope.[url] 变量，然后才能在$scope.items 数组中使用它们。
href 属性是纯 HTML，有可能在 Angular 有机会正确插入 {{item.url}} 之前点击链接。因此在这里使用ng-href 会更安全。

【讨论】：

【解决方案3】：

好吧，经过几次尝试和错误，我能够找到解决方案，我希望它可以帮助其他人。

HTML：

<md-button target="_self" ng-href={{item.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>

JS：

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

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

我注意到两件事，数组中的 url 参数应该使用 $scope.XXX 传递，而没有任何 quotes。第二件事是我首先声明了数组并构建了 url，所以数组 url 参数没有加载值。

【讨论】：