为什么使用 Angular js 的图标不显示在列表中？答案

【问题标题】：why the icon not display on list using angular js?为什么使用 Angular js 的图标不显示在列表中？
【发布时间】：2016-11-01 23:14:45
【问题描述】：

我正在尝试在列表的每个项目上显示一个图标。但caret 图标未显示在列表的第一项上。我需要此图标显示right 列表项的一侧。

其次当我点击icon时，它没有显示下拉列表。它正在捕获li的点击事件如何捕获“图标”点击事件

这是我的代码 http://codepen.io/naveennsit/pen/mEmyGG

<div ng-app='app'>
    <div ng-controller='cntr'>
        <ul class="view-list">
            <li ng-repeat="d in data" ng-click="selectView(d, $event)">
                <a href="#">{{d.name}}</a>
                <div class="dropdown">
                    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
    <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                        <li><a href="#">JavaScript</a></li>
                    </ul>
                </div>
            </li>
        </ul>
        <div>
        </div>

【问题讨论】：

我不明白你的问题。您的代码中没有图标。另外，如果你的 scss 中没有 caret 类，你怎么能期望显示 caret？
我正在使用 bootsrap 图标..请参阅代码笔

标签： javascript angularjs css angularjs-directive angularjs-scope

【解决方案1】：

将您的 HTML 更新为：

<div ng-app='app'>
  <div ng-controller='cntr'>
    <ul class="view-list">
      <li ng-repeat="d in data" ng-click="selectView(d, $event)">
        <div class="dropdown">
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
            {{d.name}}
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
          </ul>
        </div>
      </li>
    </ul>
  <div>
</div>

下拉菜单使用 JavaScript。您必须在页面中添加jQuery 和Bootstrap JavaScript 文件。

查看更新的演示：Here

【讨论】：

【解决方案2】：

尝试使用此代码更新您的 scss

.view-list {
  margin: 0;
  padding: 0;
  a {
    display: inline-block;
    padding: 10px 25px;
    width: 100px;
  }
  li {
    cursor: pointer;
    position: relative;
    height: 40px;
    border-bottom: 1px solid grey;
    >div {
      display: inline-block;
    }
  }
  .selected {
    background-color: blue;
    a {
      color: #ffffff;
    }
  }
}

问题是因为您将 width: 100% 放在 .view-list a 并且您还需要将 li 内的 div 的显示指定为 'inline-block'

对于第二个问题。不要忘记在脚本部分定义 jquery（bootstrap 需要）和 bootstrap。

【讨论】：