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

【问题标题】：AngularJS How to apply different icons in ng-repeat <li>?AngularJS 如何在 ng-repeat <li> 中应用不同的图标？
【发布时间】：2015-09-10 12:11:44
【问题描述】：

是否有任何选项显示不同的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>

【问题讨论】：

您可以简单地span class="glyphicon glyphicon-{{menu.page}}"。或使用ng-class。
当然可以。使用 ng 类。您只需要为每个菜单项关联一个图标。

标签： angularjs twitter-bootstrap-3 angularjs-ng-repeat ng-repeat glyphicons

【解决方案1】：

不确定这是否是最佳实践，甚至是正确的方法，但如果您可以控制 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>

【讨论】：

我不得不同意，我认为这不是最佳做法，将真实数据和 UI 特定值结合起来并不合适

【解决方案2】：

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

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

并确保“页面”属性与字形图标名称相同。

【讨论】：

【解决方案3】：

虽然我会使用 kib 建议的“添加到 JSON”方法，但如果您的 JSON 来自 ajax，您也可以将其放入函数中。

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

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

【讨论】：