ng show显示所有项目

ng-show Displaying all items

本文关键字：项目 显示 show ng      更新时间：2023-10-16

继续使用angularjs，现在ng-show出现问题，点击后会显示所有隐藏的数据。正如我所理解的，我需要指定我想要显示的点击项目的ID，从我的例子中，我使用的是具有布尔值的ng模型，点击后它变为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);
    });
}

您可以通过以下方式进行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

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

假设以下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);
    });
});

点击此处查看

相关文章：