SARAN SARAN - 14 days ago 5
AngularJS Question

Angular js ng-show and ng-hide

Here i have the code:

<ul ng-controller="Modalcontrol" class="card_ul">
<li ng-repeat="item in list">
{{item.name }}
<p>
<span class="yellow" align="left" ng-repeat="labels in item.labels" ng-show="filter_card_id == labels.id" >
{{ labels.id }}
</span>
#{{ item.card_id }}
</p>
</li>
</ul>


In this ng-show="filter_card_id == labels.id" code worked properly but i want to apply this show and hide to this parent list. how?

Answer

You can filter in parent list like this:

angular.module('ExampleApp', [])
  .controller('ExampleController', function() {
    this.list = [{
      id: 1,
      labels: [{
        id: 11
      }, {
        id: 12
      }]
    }, {
      id: 2,
      labels: [{
        id: 21
      }, {
        id: 22
      }]
    }, {
      id: 3,
      labels: [{
        id: 31
      }, {
        id: 32
      }]
    }];
    this.filter = {
      id: undefined
    };
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>

<div ng-app="ExampleApp">
  <div ng-controller="ExampleController as vm">
    <label>
      Filter
      <input type="number" ng-model="vm.filter.id" />
    </label>
    <ul ng-repeat="item in vm.list|filter:{labels:{id:vm.filter.id?vm.filter.id:undefined}}:true">
      <li>{{item.id}}
        <ul ng-repeat="label in item.labels|filter:{id:vm.filter.id?vm.filter.id:undefined}:true">
          <li>{{label.id}}</li>
        </ul>
      </li>
    </ul>
  </div>
</div>

Live example on jsfiddle.

Comments