Question

所以我一直在玩这个角度演示，并为它创建了一个codepen。

我正在尝试将底部工作表中显示的每个列表/网格项目转换为链接。基本上，我想将它们包装在标签中。

我通过javascript将html拉入，只是为了在codepen上运行的版本。我看到它使用Ng-repeat来循环遍历范围内的项目以获取全部金额。如何将每个链接转换为各自的链接？

我确信这是一个简单的解决方案，但我很难过。

感谢帮助人员

<md-bottom-sheet class="md-grid">
  <md-list>
    <md-item ng-repeat="item in items">
      <md-button class="md-grid-item-content" aria-label="{{item.name}}" ng-click="listItemClick($index)">
        <div class="md-icon-container">
          <md-inline-grid-icon icon="{{item.icon}}"></md-inline-grid-icon>
        </div>
        <p class="md-grid-text"> {{ item.name }} </p>
      </md-button>
    </md-item>
  </md-list>
</md-bottom-sheet>

Angular

angular.module('bottomSheetDemo1', ['ngMaterial'])
.controller('BottomSheetExample', function($scope, $timeout, $mdBottomSheet){
  $scope.alert = '';

  $scope.showGridBottomSheet = function($event) {
    $scope.alert = '';  
    $mdBottomSheet.show({
      template: gridTemplate,
      controller: 'GridBottomSheetCtrl',
      targetEvent: $event
    }).then(function(clickedItem) {
      $scope.alert = clickedItem.name + ' clicked!';
    });
  };
})

.controller('GridBottomSheetCtrl', function($scope, $mdBottomSheet) {
  $scope.items = [
    { name: 'Hangout', icon: 'hangout' },
    { name: 'Mail', icon: 'mail' },
    { name: 'Message', icon: 'message' },
    { name: 'Copy', icon: 'copy' },
    { name: 'Facebook', icon: 'facebook' },
    { name: 'Twitter', icon: 'twitter' },
  ];
  $scope.listItemClick = function($index) {
    var clickedItem = $scope.items[$index];
    $mdBottomSheet.hide(clickedItem);
  };
});

修改* 忘了添加我试图使用图像而不是图标，但只是在codepen中放入一个url链接也不显示它。

Answer 1

因此，如果我理解正确，而不是按钮执行他们现在所做的事情（他们每个人调用相同的函数并在点击时传入他们的索引），你会喜欢这些按钮是带有“href”属性的锚标签你选择的。是吗？

如果是这样，您可以使用多种选项。我不会进入ngRoute选项，因为它更深入，但如果您的链接指向角度应用程序的另一部分，您将需要查看它。 https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref

最简单的方法是为每个“项目”对象分配URL。

{ name: 'Hangout', icon: 'hangout', urlPath: 'boobs.html' },

<a class="md-grid-item-content" aria-label="{{item.name}}" 
  ng-href="www.whatever.com/{{item.urlPath}}">

Answer 2

您需要添加一个＆＃34;来源＆＃34;和一个＆＃34; url＆＃34;你的物品。

 { name: 'Hangout', imagesource: 'Path/To/My/Image/Here', linkurl: 'Url/Here' },

然后在超链接标记中包含带有角度源指令的图像标记。

<div class="md-image-container">
    <a href='{{ item.linkurl }}'>
         <img ng-src="{{ item.imagesource }}"/>
    </a>
</div>

如何在此角度演示中添加链接？

2 个答案: