AngularJS如何在ng-repeat <li>中应用不同的图标？

Question

是否有任何选项显示不同的glyphicon图标取决于项目标题,事情是JSON菜单列表可能会有所不同

演示http://codepen.io/anon/pen/doZZgp

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope){
  $scope.menuList = [
    {page: "dashboard", title: "Dashboard"},
    {page: "ui", title: "UI"},
    {page: "expense", title: "Expenses"},
    {page: "invoice", title: "Invoice"},
    {page: "recur", title: "Reccurring Bills"},
    {page: "profile", title: "My Profile"},
    {page: "settings", title: "Settings"},
    {page: "login", title: "Login"},
    {page: "phonebook", title: "Phone book"}
  ]
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp' ng-controller="myCtrl">
  <ul class="nav">
    <li ng-repeat="menu in menuList"><a href="#{{menu.page}}"><span class="glyphicon glyphicon-book"></span> {{menu.title}}</a>
    </li>
  </ul>
</div>

Answer 1

在您的HTML中,只需将页面标题添加到glyphicon-:

<li ng-repeat="menu in menuList">
    <a href="#{{menu.page}}">
        <span class="glyphicon glyphicon-{{ menu.page }}"></span> 
        {{menu.title}}
    </a>
</li>

并确保'page'属性与glyphicon名称相同.