javascript - 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をクリックするとテキスト1が表示され、他のテキストが非表示になり、id-2をクリックするとテキスト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>

ここに作業フィドルがあります

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>