angularjs - hide list items on the basis of data in angular using ng-hide -
i want show list items data coming api . want use standard way show data coming
<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>
data 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 ] },]
in above case show list items data present in social_media array . there method of dealing using ng-repeat
you don't need use ng-hide problem if have fix condition use ng-if purpose
<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>
Comments
Post a Comment