AngularJS中的ng-hide和ng-show

韦巴·贾恩

我想使用AngularJS以切换方式显示和隐藏与特定ID相关的数据。

我的JSON数据格式如下:

  $scope.things = [{
        id: 1,
        data: 'One',
        shown: true
    }, {
        id: 2,
        data: 'Two',
        shown: false
    }, {
        id: 3,
        data: 'Three',
        shown: true
    },  ];

我想要的是单击id-1时将显示文本1和隐藏其他,单击id-2时将显示文本2和隐藏其他,依此类推。

这是我尝试的小提琴:jsfiddle:演示链接

西蒙

我更新了您的代码

$scope.flipMode = function (id) {
    $scope.things.forEach(function (thing) {
                 if(id == thing.id){
                     thing.shown = true;
                 }
                 else{
                     thing.shown = false;
                 }
    })
};


<a href="#" ng-click="flipMode(thing.id)">{{thing.id}}</a>

这是工作的小提琴

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在AngularJS中通过按钮使用ng-show和ng-hide

来自分类Dev

单张图例中的ng-hide和ng-show

来自分类Dev

AngularJS ng-show / ng-hide

来自分类Dev

ng-hide和ng-show无法正常工作

来自分类Dev

无法让ng-hide和ng-show正常工作

来自分类Dev

ng-show和ng-hide不起作用

来自分类Dev

AngularJS中的ng-hide show on-click事件

来自分类Dev

如何仅针对单击angularJS ng-show和ng-hide的表行定位

来自分类Dev

如何仅针对单击angularJS ng-show和ng-hide的表行定位

来自分类Dev

我需要NG-IF / NG-SWITCH还是NG-SHOW和NG-HIDE?

来自分类Dev

ng-show和ng-hide在html5 / js chrome扩展程序中失败

来自分类Dev

如何在一格中声明ng-show和ng-hide

来自分类Dev

如何在一格中声明ng-show和ng-hide

来自分类Dev

AngularJS:ng-show / ng-hide必填字段

来自分类Dev

AngularJS:ng-show

来自分类Dev

AngularJS: ng-show

来自分类Dev

在angularjs中,我们有ng-disabled指令,为什么框架没有提供ng-enabled指令,因为我们有ng-show和ng-hide

来自分类Dev

AngularJS / 用自定义方法替换 ng-click 和 ng-show 中的排序

来自分类Dev

在ng-repeat循环中具有ng-clikc功能的ng-show和ng-hide

来自分类Dev

除了AngularDart中的否定条件外,ng-show和ng-hide是否完全相同?

来自分类Dev

ngAnimate CSS动画不适用于ng-show和ng-hide

来自分类Dev

为什么我从ng-show =“!emptyArray”和ng-hide =“ emptyArray”得到不同的结果?

来自分类Dev

Ng-Show和Ng-Hide有什么区别?

来自分类Dev

如何使用ng-show和ng-hide实现点击离开功能

来自分类Dev

多个锚标签上的 ng-show 和 ng-hide

来自分类Dev

AngularJS ng-hide ng-show或ng-if基于数组项的活动状态

来自分类Dev

基于数组项的活动状态的AngularJS ng-hide ng-show或ng-if

来自分类Dev

AngularJS:ng-show用法

来自分类Dev

AngularJS ng-show == ID?

Related 相关文章

  1. 1

    如何在AngularJS中通过按钮使用ng-show和ng-hide

  2. 2

    单张图例中的ng-hide和ng-show

  3. 3

    AngularJS ng-show / ng-hide

  4. 4

    ng-hide和ng-show无法正常工作

  5. 5

    无法让ng-hide和ng-show正常工作

  6. 6

    ng-show和ng-hide不起作用

  7. 7

    AngularJS中的ng-hide show on-click事件

  8. 8

    如何仅针对单击angularJS ng-show和ng-hide的表行定位

  9. 9

    如何仅针对单击angularJS ng-show和ng-hide的表行定位

  10. 10

    我需要NG-IF / NG-SWITCH还是NG-SHOW和NG-HIDE?

  11. 11

    ng-show和ng-hide在html5 / js chrome扩展程序中失败

  12. 12

    如何在一格中声明ng-show和ng-hide

  13. 13

    如何在一格中声明ng-show和ng-hide

  14. 14

    AngularJS:ng-show / ng-hide必填字段

  15. 15

    AngularJS:ng-show

  16. 16

    AngularJS: ng-show

  17. 17

    在angularjs中,我们有ng-disabled指令,为什么框架没有提供ng-enabled指令,因为我们有ng-show和ng-hide

  18. 18

    AngularJS / 用自定义方法替换 ng-click 和 ng-show 中的排序

  19. 19

    在ng-repeat循环中具有ng-clikc功能的ng-show和ng-hide

  20. 20

    除了AngularDart中的否定条件外,ng-show和ng-hide是否完全相同?

  21. 21

    ngAnimate CSS动画不适用于ng-show和ng-hide

  22. 22

    为什么我从ng-show =“!emptyArray”和ng-hide =“ emptyArray”得到不同的结果?

  23. 23

    Ng-Show和Ng-Hide有什么区别?

  24. 24

    如何使用ng-show和ng-hide实现点击离开功能

  25. 25

    多个锚标签上的 ng-show 和 ng-hide

  26. 26

    AngularJS ng-hide ng-show或ng-if基于数组项的活动状态

  27. 27

    基于数组项的活动状态的AngularJS ng-hide ng-show或ng-if

  28. 28

    AngularJS:ng-show用法

  29. 29

    AngularJS ng-show == ID?

热门标签

归档