How to filter with ng-repeat?

Asked

Viewed 855 times

5

I have two <select>, i.e., a handmade picklist(multiselect).

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

In the second <select>, I want to show only the customers brought by ng-repeat but containing the field consultaNotasDestinadas like '0'.

How can I do that?

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

1 answer

4


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

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

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

Functional example to follow:

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>

  • Please, I’m picking up this error: Expected array but Received: {}. what can I do?

  • @Leonardoleonardo It seems to me that the data source you are passing to the ng-repeat directive is an object, rather than a collection. Reference: http://stackoverflow.com/questions/32214990/angularjs-error-filternotarray-expected-array-but-received-with-a-filter

  • I will mark correct for the answer, because my problem is now another, the filter worked, did not pick anything because my attribute in JS comes as null, I tested with null and came. Ai is something else, my DTO was a Boolean and the mysql database was BIT, mysql does not have Boolean...

  • @Leonardoleonardo Always a pleasure to help. Feel free to post as many questions as you need. Your questions may help future developers.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.