warum das Symbol nicht in der Liste mit angular js angezeigt wird?

Question

Ich versuche, ein Symbol auf jedem Element der Liste anzuzeigen, aber caret Symbol nicht auf dem ersten Element der Liste angezeigt. Ich brauche dieses Symbol right Seite des Elements der Liste anzeigen.

zweitens, wenn ich auf icon klicken ist es nicht Drop-Down-Liste .it Anzeige Click-Ereignis von li aufzeichnet, wie 'Symbol' erfassen klicken Ereignis

hier ist mein Code 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> 

Answer 1

versuchen Sie, Ihre scss mit diesem Code zu aktualisieren

.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; 
    } 
    } 
} 

Die Frage, weil Sie setzen Breite: 100% auf der .view-Liste ein und Sie müssen auch die Anzeige von div innerhalb des li specifiy ‚inline-block‘

und für seconde Thema. Vergessen Sie nicht, jquery (benötigt von bootstrap) und bootstrap für den Skriptteil zu definieren.

Answer 2

Aktualisieren Sie Ihre 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> 

das Drop-down JavaScript verwendet. Sie müssen jQuery und Bootstrap JavaScript Datei auf Ihrer Seite hinzufügen.

Siehe aktualisierte Demo: Here