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