0

私はリストの各項目にアイコンを表示しようとしていますが、caretアイコンはリストの最初の項目に表示されません。このアイコンが必要ですディスプレイrightリストの項目の横。アイコンが角度jを使用してリストに表示されないのはなぜですか?

第二私はそれがドロップダウンリスト.ITが表示されていない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> 
+1

私はあなたの質問を理解していません。あなたのコードにアイコンはありません。また、あなたのscssに 'caret'クラスがない場合、'キャレット 'が表示されることをどのように期待できますか? –

+0

私はbootsrapアイコンを使用しています..コードペンを見てください – user944513

答えて

0
です

このコードで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; 
    } 
    } 
} 

.view-listのwidth:100%を に置き、li内のdivの表示を 'inline-block'

と指定する必要があります。 jquery(ブートストラップで必要となる)とスクリプト部分のブートストラップを定義することを忘れないでください。

enter image description here

0

にあなたのHTMLを更新します。ドロップダウンではJavaScriptを使用している

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

。あなたのページにjQueryBootstrap JavaScriptファイルを追加する必要があります。

更新されたデモをご覧ください:Here

関連する問題