35768


ons-listの特定行(１～３行目)のみアイコンを表示したいのですが、  
どのようにすればよいでしょうか。

OnsenUI v2とAngularJS v1で開発しております。  
ご教授のほど、よろしくお願い致します。

[code]

        <ons-list>
            <ons-list-item  ng-repeat="data in dataList ">
            <div>
                <!-- ↓アイコン画像を１～３行目のみ表示 -->
                <img src="test.jpg"/>
            </div>
                <span>{{data.name}}</span>
            </ons-list-item>
        </ons-list>
    
[/code]


CC BY-SA 3.0
2017-06-21T02:34:25.580
35767
2017-06-21T02:58:56.277
19657
question
css onsen-ui angularjs
ons-list の特定行のみ、アイコンを表示したい


`ng-
repeat`ディレクティブ内では[特殊な値](https://docs.angularjs.org/api/ng/directive/ngRepeat)が使用できます。  
その中で`$index`は`ng-repeat`ディレクティブ要素のインデックス値を示すため、この値を利用することで特定の順番の要素に変化をつけられます。  
要素の表示/非表示には`ng-if`ディレクティブ、または`ng-show`ディレクティブなどを使用すると良いでしょう。

[code]

    <!-- $indexが0〜2の場合に表示 -->
    <img ng-if="$index < 3" src="test.jpg"/>
    
[/code]


CC BY-SA 3.0
2017-06-21T02:58:56.277
35768
2017-06-21T02:58:56.277
20272
35767
answer