将变量值传递给 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>

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

$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 中完成这个

Answer 2

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

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

Answer 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 参数未加载值。

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

Pass variable value to array arguments in AngularJs 1.X

javascript

scope

angularjs

rootscope