ng-showすべての項目を表示

angularjsで作業を続け、ng-showに問題が発生した場合、クリックするとすべての隠しデータが表示されます。私が理解しているように、私はブール値を持っていたng-modelを使っていて、それをクリックすると真に変わるので、表示したいクリックされたアイテムのIDを指定する必要があります。私に教えてください、私が選んだアイテムをどうやって見せてもらえますか？ng-showすべての項目を表示

<div class="list-group" ng-click="SetItemVisible()" ng-repeat="q in feed"> 
    <a href="" class="list-group-item"> 
     <h4 ng-model="showItem" class="list-group-item-heading">{{q.title}}</h4> 
     <p ng-show="showItem" value="true" class="list-group-item-text">{{q.body}}</p> 
    </a> 
</div>

とJS：

$scope.SetItemVisible = function() { 
    if (!$scope.showItem) { 
     $scope.showItem = true; 
    } else { 
     $scope.showItem = false; 
    } 
} 

$scope.feed = []; 

function getRssItems() { 
    rssFeedService.getFeed().then(function (results) { 
     $scope.feed = results.data; 

    }, function (error) { 
     //alert(error.data.message); 
    }); 
}

出典

2016-03-31 Vitaliy

をチェックshowItem' – Rayon

ng-showここで真理値に基づいています。あなたの「showItem」は常に存在しています（つまり、真実であることを示しています）。 –

表示したい選択項目のIDを指定する方法はありますか？ – Vitaliy

次の方法でDISを行うことができます。ライブデモについては

$scope.feed = [{ 
    'title': "A", 
    'body': "testA body" 
    }, 
    { 
    'title': "b", 
    'body': "testb body" 
    } 
    ] 
    $scope.showItem = {}; 
    $scope.SetItemVisible = function (index) { 
    $scope.showItem[ index] = true; 

    } 

<div class="list-group" ng-click="SetItemVisible($index)" ng-repeat="q in feed track by $index"> 
<a href="" class="list-group-item"> 
    <h4 ng-model="showItem[$index]" class="list-group-item-heading">{{q.title}}</h4> 
    <p ng-show="showItem[$index]" value="true" class="list-group-item-text">{{q.body}}</p> 
</a>

こちらをクリックしてください：http://plnkr.co/edit/ApI9eb8eQlBdoMUkn8do?p=preview

を

出典

2016-03-31 11:01:11 panwar

<div class="list-group" ng-click="q.showItem != q.showItem" ng-repeat="q in feed"> 
    <a href="" class="list-group-item"> 
     <h4 ng-model="showItem" class="list-group-item-heading">{{q.title}}</h4> 
     <p ng-show="q.showItem" value="true" class="list-group-item-text">{{q.body}}</p> 
    </a> 
</div>

出典

2016-03-31 10:49:18 omarCreativeDev

ng-repeatと思うので、あなたのバリアントは機能しません。彼が繰り返すデータは '$ http.get'機能から得られる 'フィード'配列からです。 – Vitaliy

'フィード'配列のサンプルを投稿できますか？ – omarCreativeDev

はい、トピックは既に編集されています。 – Vitaliy

フィード

[ 
     { 
     "title":"test1", 
     "body":"test body 1", 
     "show":false 
     }, 
     { 
     "title":"test2", 
     "body":"test body 2", 
     "show":false 
     } 
    ]

HTML

<body ng-controller="MainCtrl"> 

    <div class="list-group" ng-repeat="q in feed"> 
    <a class="list-group-item"> 
     <h4 ng-click="q.show=!q.show" class="list-group-item-heading">{{q.title}}</h4> 
     <p ng-show="q.show" value="true" class="list-group-item-text">{{q.body}}</p> 
    </a> 
</div>

ために、以下のJSONを想定すると、JS

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope, $http) { 
    $scope.feed = []; 

    $http.get('feed.json').then(function (results) { 
     $scope.feed = results.data; 

    }, function (error) { 
     //alert(error.data.message); 
    }); 

});

すべての `p`要素の可視性は、単一のスコープ変数`にバインドされhere

出典

2016-03-31 11:17:11

ng-showすべての項目を表示

答えて

関連する問題