AngularJS中的ng-hide＆ng-show

Question

使用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它會顯示文字中的一個，並隱藏了別人，當點擊ID-2將顯示文本兩個和隱藏其他等等。

這是我試過的小提琴：jsfiddle : Demo Link

Answer 1

我更新代碼

$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> 

這裏工作fiddle

Answer 2

它應該工作

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

        thing.shown = false; 
     }) 
    }; 

<div ng-repeat="thing in things"> 

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

Answer 3

叉形工作液：http://jsfiddle.net/nypmmkrh/

更改範圍功能：

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

又通中的id觀點：

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