2

私は基本的に、タイトルのng-repeat下をフィルタリングするためにも使用されているクリックイベントに基づいて、セクションのタイトルを表示/非表示にしようとしています。

ng-click私の考えは、フィルター機能に利用している を再利用してクラスを切り替えることでした。私のフィルターは ng-repeat で完全に機能していますが、条件付きクラスを見出しで機能させることができないようです。

以下は（簡略化された）コードです。

<div ng-init="phones = [
            {name:'Samsung Galaxy S II', product_type: 'android'},
            {name:'iPhone 5', product_type: 'ios'},
            {name:'Samsung Galaxy S II', product_type: 'android'},
            {name:'iPhone 5', product_type: 'ios'},
            {name:'Samsung Galaxy S II', product_type: 'android'},
            {name:'iPhone 5', product_type: 'ios'}
        ]">

    <!-- Filters for products -->

    <a href="#" ng-click="property = null">All</a>
    <a href="#" ng-click="property = {product_type:'android'}">Android</a>
    <a href="#" ng-click="property = {product_type:'ios'}">iOS</a>

    <!-- Android Product Section -->

    <h2 ng-class="{true: 'hide', false: 'show'}[property == {product_type:'ios'}]">Android</h2>

    <div ng-repeat="phone in phones | filter:property | filter:{product_type:'android'}">
        <h3>{{ phone.name }}</h3>
    </div>

    <!-- iOS Product Section -->

    <h2 ng-class="{true: 'hide', false: 'show'}[property == {product_type:'android'}]">iOS</h2>  

    <div ng-repeat="phone in phones | filter:property | filter:{product_type:'ios'}">
        <h3>{{ phone.name }}</h3>
    </div>
</div>

ここに私のコードのデモがあります: http://codepen.io/micjamking/pen/c0cfb8039492204d0282c42f563983e0

参考までに、上記の JSON (オブジェクトの配列) の構造/スキームを変更することはできません。私は実際にサービスの API からデータを取得していますが、これはビューで起こっていることすべてを表示する簡単な方法だと思いました。

これについて誰かの助けやアドバイスを心から感謝します。

4

1 に答える 1

1

あなたのng-classディレクティブは必要以上に複雑だったようです。次のように更新しました。

<h2 ng-class="{invisible: property.product_type =='ios'}">Android</h2>
...
<h2 ng-class="{invisible: property.product_type =='android'}">iOS</h2>

デモ用の jsFiddle を次に示します: http://jsfiddle.net/jandersen/ZFDQT/1/

(invisibleクラスは codepen の例から取得されます)

于 2013-08-02T06:33:08.087 に答える