How to filter with ng-repeat?

Question

How to filter with ng-repeat?

Navigation

#1 by (4 votes)

5

I have two <select> , ie a handmade multiselect picklist.

In the first <select> , I want to show only the clients that are brought by ng-repeat but contain the consultaNotasDestinadas field as '1'.

In the second <select> , I want to show only the clients that are brought by ng-repeat but contain the consultaNotasDestinadas field as '0'.

How can I do this?

Follow my html:

<div class="form group">
   <label class="control-label col-md-3">Empresas:</label>
   <select id="select1" name="select1" multiple="multiple">
     <option ng-repeat="c in clientes" value="{{c.idCliente}}" ng-click="atribuirUm($index, c)">{{c.razaoSocial}}</option>
   </select>
   <label class="control-label col-md-3">Empresas:</label>
   <select ng-model="listaEmpresas" id="select2" name="select2" multiple="multiple">
     <option selected="selected" ng-repeat="c2 in clientes2" value="{{c2.idCliente}}" ng-click="limparUm($index, c2)">{{c2.razaoSocial}}</option>
   </select>
</div>

angularjs

asked by anonymous 10.02.2016 / 14:40

1 answer

How to implement drag-and-drop on an html page? Is there a maximum size limit for an HTML page?

score 4 · Accepted Answer

Apply the filter directly via the filter directive, specifying an object that represents the properties you want to filter and the value of the criteria:

[...]
    <option ng-repeat="c in clientes | filter: { consultaNotasDestinadas : '1' }">
[...]

Will only display c objects whose consultaNotasDestinadas property has value equal to '1' .

Functional example below:

var app = angular.module('sampleApp', ['ngResource']);

app.controller('SampleController', function ($scope, $resource) {
  
  $scope.clientes = [
    { Name : 'Cliente 1', consultaNotasDestinadas : '1'},
    { Name : 'Cliente 2', consultaNotasDestinadas : '0'},
    { Name : 'Cliente 3', consultaNotasDestinadas : '1'},
    { Name : 'Cliente 4', consultaNotasDestinadas : '0'}
  ];
});

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-resource.js"></script>
<div ng-app="sampleApp">

  <div ng-controller="SampleController">
    <table>
      <tr><td>Clientes com consultaNotasDestinadas = 1</td>
        <td>
          <select>
            <option ng-repeat="c in clientes | filter: { consultaNotasDestinadas : '1' }" value='{{c.Name}}'>{{c.Name}}</option>
          </select>
        </td>
      </tr>
      <tr><td>Clientes com consultaNotasDestinadas = 0</td>
        <td>
          <select>
            <option ng-repeat="c in clientes | filter: { consultaNotasDestinadas : '0' }" value='{{c.Name}}'>{{c.Name}}</option>
          </select>
        </td>
      </tr>
    </table>
  </div>
</div>