ng-show 显示所有项目

Question

继续使用 angularjs，现在 ng-show 出现问题，单击它会显示所有隐藏数据。据我了解，我需要指定要显示的已单击项目的 ID，在我的示例中，我使用的是具有布尔值的 ng-model，单击它会更改为 true，这就是它显示所有项目的原因。请告诉我，我怎样才能显示我选择的项目？

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

Answer 1

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

Answer 2

您可以通过以下方式完成：

$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

Answer 3

假设以下 JSON 供稿

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

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

});

查看 here

ng-show 显示所有项目

ng-show Displaying all items

javascript

angularjs

ng-show

ng-hide