css - 我应该如何为angularjs中的嵌套对象应用条件类

Question

我实际上是在尝试根据点击事件显示/隐藏部分标题，该点击事件也用于过滤标题下方的 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 获取数据，但我认为这是一种在 View 中显示所有内容的简单方法。

我真诚地感谢任何人对此的帮助或建议。

Answer 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 类取自您的代码笔示例)