使用 ng-hide 根据 angular 中的数据隐藏列表项

Question

我只想显示数据来自 API 的列表项。我想用一种标准的方式只显示那些数据即将到来的人

 <div class="row" ng-repeat="query in prev_queries">
                      <div class="col-md-12 cell">
                         <div class="well" >
                            <p class="history">{{query.query_string}}</p>
                            <ul  class="history-filter">
                               <li ng-hide="true"> <i class="fa fa-twitter fa-2x" aria-hidden="true"></i> </li>
                               <li ng-hide="true"> <i class="fa fa-facebook fa-2x" aria-hidden="true"></i> </li>
                               <li ng-hide="false"> <i class="fa fa-instagram fa-2x" aria-hidden="true"></i> </li>
                               <li ng-hide="true"> <i class="fa fa-youtube fa-2x" aria-hidden="true"></i> </li>
                               <li ng-hide="false"> <i class="fa fa-flickr fa-2x" aria-hidden="true"></i> </li>
                            </ul>
                            <p class="history-time"> {{query.timestamp | date}}</p>
                            <span class="pull-right"> <span class="bigcheck">
                            <label class="bigcheck">
                            <input type="checkbox" class="bigcheck" onchange="showHideIndividualAttributes(this); return false" value="1" />
                            <span class="bigcheck-target"></span> </label>
                            </span> </span>
                         </div>
                      </div>
 </div>

数据来自API

[
  {
    "_id": "57998a58d5692e2b00e5de9f",
    "query_string": "snowy",
    "query_type": "others",
    "timestamp": "2016-07-28T04:30:16.624Z",
    "__v": 0,
    "social_media": [
      6,
      1
    ]
  },
  {
    "_id": "5799aedad5692e2b00e5df37",
    "query_string": "Edhi",
    "query_type": "others",
    "timestamp": "2016-07-28T07:06:02.113Z",
    "__v": 0,
    "social_media": [
      1,
      6,
      2,
      4,
      3
    ]
  },]

在上述情况下，仅显示其数据存在于 social_media 数组中的列表项。有没有使用 ng-repeat

处理这个问题的方法

Answer 1

你可以试试 ng-show

<div class="row" ng-repeat="query in prev_queries" ng-show="query.social_media.length > 0">

对于这个，如果社交媒体数组为空则不会显示。

Answer 2

如果你有修复条件，你不需要使用 ng-hide 解决这个问题，使用 ng-if 解决这个问题

<div class="row" ng-repeat="query in prev_queries">
                      <div class="col-md-12 cell">
                         <div class="well" >
                            <p class="history">{{query.query_string}}</p>
                            <ul  class="history-filter">
                               <li ng-repeat-start="media in query.social_media" ng-if"media == 1"> <i class="fa fa-twitter fa-2x" aria-hidden="true"></i> </li>
                               <li ng-if="media == 2"> <i class="fa fa-facebook fa-2x" aria-hidden="true"></i> </li>
                               <li  ng-if="media == 3"> <i class="fa fa-instagram fa-2x" aria-hidden="true"></i> </li>
                               <li ng-if="media == 4"> <i class="fa fa-youtube fa-2x" aria-hidden="true"></i> </li>
                               <li ng-if="media == 5" ng-repeat-end> <i class="fa fa-flickr fa-2x" aria-hidden="true"></i> </li>
                            </ul>
                            <p class="history-time"> {{query.timestamp | date}}</p>
                            <span class="pull-right"> <span class="bigcheck">
                            <label class="bigcheck">
                            <input type="checkbox" class="bigcheck" onchange="showHideIndividualAttributes(this); return false" value="1" />
                            <span class="bigcheck-target"></span> </label>
                            </span> </span>
                         </div>
                      </div>
 </div>

使用 ng-hide 根据 angular 中的数据隐藏列表项

hide list items on the basis of data in angular using ng-hide

angularjs

ng-repeat

ng-hide