ng-show Alle Artikel anzeigen

Arbeitet weiter mit angularjs und habe jetzt ein Problem mit ng-show, bei dem ich alle versteckten Daten anzeigen kann. Wie ich es verstehe, muss ich die ID des angeklickten Elements angeben, die ich zeigen möchte. In meinem Beispiel verwende ich ng-model, das einen booleschen Wert hat, und wenn es auf "true" klickt, werden alle Elemente angezeigt. Sag mir bitte, wie kann ich einen Artikel zeigen, den ich ausgewählt habe?ng-show Alle Artikel anzeigen

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

Und 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); 
    }); 
}

Quelle

2016-03-31 Vitaliy

Alle 'P' Sichtbarkeit Unter der Annahme, Elemente mit einzelnen Bereich Variable binded' showItem' – Rayon

ng-show basiert auf Wahrheitswert hier ist Ihr "showItem" immer präsent (d. h.) wahr, weshalb es immer angezeigt wird. –

Wie kann ich die ID des ausgewählten Artikels angeben, den ich anzeigen möchte? – Vitaliy

Sie dis tun können:

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

Für Live-Demo finden Sie hier: http://plnkr.co/edit/ApI9eb8eQlBdoMUkn8do?p=preview

Quelle

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>

Quelle

2016-03-31 10:49:18 omarCreativeDev

Ihre Variante funktioniert nicht, weil, ich denke an ng-repeat, die Daten, die er wiederholt von 'feed' Array, die von '$ http.get' Funktion kommt. – Vitaliy

können Sie ein Beispiel für das Array 'Feed' veröffentlichen? – omarCreativeDev

Ja, Thema bereits bearbeitet. – Vitaliy

Feed folgende JSON für

[ 
     { 
     "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>

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); 
    }); 

});

Check out here

Quelle

2016-03-31 11:17:11

ng-show Alle Artikel anzeigen

Antwort

Verwandte Themen