Как добавить ссылки в это угловое демо?

Question

, поэтому я играл с этой угловой демонстрацией и создал для нее кодекс.

http://codepen.io/H0BB5/pen/JoBYxX

Я пытаюсь сделать каждый из элементов списка/сетки, показанных в нижнем листе в ссылки. По сути, я хотел бы обернуть их в теги.

У меня есть html, который втягивается через javascript только для рабочей версии на 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.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); 
    }; 
}); 

EDIT * Забыл добавить, что я пытаюсь использовать изображения вместо икон, а просто положить в URL ссылки в кодефене тоже не отображается.

Answer 1

Итак, если я правильно вас понимаю, а не кнопки, выполняющие то, что они делают сейчас (каждый из них вызывает одну и ту же функцию и передает их индекс при нажатии), вместо этого вы должны использовать кнопки для привязки тегов с помощью «href», атрибут по вашему выбору. Это правильно?

Если это так, у вас есть несколько доступных вам опций. Я не буду входить в опцию ngRoute, потому что это немного больше indepth, но если ваши ссылки будут указывать на другую часть вашего углового приложения, вам нужно будет изучить это. https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref

Самый простой способ - назначить URL-адрес каждому из объектов «item».

{ 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

Вам нужно будет добавить "источник" и "URL" на ваши вопросы.

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