Question

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

＆＃13;

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"}
  ]
});

＆＃13;

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

＆＃13;

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名称相同。

Answer 2

虽然我自己会使用＆＃34;添加到JSON＆＃34; kib建议的方法，如果你的JSON来自ajax，你也可以把它放在一个函数中。

<span class="glyphicon" ng-class="getClass(menu.page)"></span>

$scope.getClass = function (page) {
    switch(page) {
        case "dashboard": return "glyphicon-book";
        case ...
    }
}

Answer 3

不确定这是最佳做法还是正确的做法，但如果您可以控制JSON，是否可以将glyphicon类添加到JSON中？

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

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

HTML代码可能是

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

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

3 个答案: