Angularjs Why my filter always get all the array of objects?

Question

I made a custom filter in angularjs, but in the filter function always gets the full array of objects even if i selected just one, i took a look to the console log

Size of array : 4

Array [ Object, Object, Object, Object ]

the select code:

<select ng-model="query" data-placeholder="Buscar..." multiple class="control-group html-multi-chosen-select" multiple="multiple" chosen >
                            <optgroup ng-repeat="pueblo in pueblos[0].estados | orderBy:'nombre'" label={{pueblo.nombre}}>
                                <option value=""> </option>
                                <option ng-repeat="localidad in pueblo.localidades | orderBy:'nombre'" value={{localidad.nombre}}>
                                    {{localidad.nombre}}</option>
                            </optgroup>
                        </select>

the custom filter is inside a table row:

<tr data-ng-repeat="pueblo in pueblos[0].estados | busqueda:query | orderBy:'nombre' ">
     <td>
          <p>{{pueblo.nombre}}</p>
          <p data-ng-repeat="localidad in pueblo.localidades| busqueda:query | orderBy:'nombre'">
          {{localidad.nombre}}</p>
    
     </td>

and the code of the filter:

App.filter('busqueda', function(){
             
  return function(input){
    var out = []; 

    if(!angular.isUndefined(input)){
     console.log("size of array: "+ input.length);
       console.log(input);

      for(var i=0;i<input.length;i++){
           
             for(var j=0;j<input[i].length;j++){
             
             console.log(input[i].nombre);
             out.push(input[i].localidades[j].nombre);

             }
           
       }
      return out;      
    }

     console.log(out);
     console.log("*****************");
     return null;
  }
});

Trisped · Accepted Answer · 2015-09-11 06:12:16Z

1

Here is the Plunker. I simplified a bit, but this should explain what you are trying to do.

Steps:

Remove multiple="multiple" from the select tag, you only need the one.
Change the value of the repeated option elements to value={{localidad}} and add the localidades id to the localidad. You will need both numbers for your two filters to work.
Change your table row to:

<tr data-ng-repeat="pueblo in pueblos[0].estados | filter:filterEstados | orderBy:'nombre' ">
    <td>
        <p>{{pueblo2.nombre}}</p>
        <p data-ng-repeat="localidad in pueblo.localidades | filter:filterLocalidad | orderBy:'nombre'">{{localidad.nombre}}</p>
    </td>
</tr>

Add the following to your scope initialization (assumes localidades id is in the localidadesNombre property):

$scope.filterEstados = function(value, index, array) {
    if(!$scope.query || $scope.query.length <= 0 || !value){
        return false;
    }
    for(var i = 0; i < $scope.query.length; i++)
    {
        var currentVal = angular.fromJson($scope.query[i]);

        if(currentVal.localidadesNombre === value.nombre){
            return true;
        }
    }
    return false;
};
$scope.filterLocalidad = function(value, index, array) {
    if(!$scope.query || $scope.query.length <= 0 || !value){
        return false;
    }

    for(var i = 0; i < $scope.query.length; i++)
    {
        var currentVal = angular.fromJson($scope.query[i]);

        if(currentVal.nombre === value.nombre){
            return true;
        }
    }
    return false;
};

I had trouble getting your custom filter to work in Plunker, but it should be easy to adapt this code once you have it implemented.

edited Sep 11, 2015 at 6:12

answered Sep 10, 2015 at 16:44

Trisped

6,0442 gold badges51 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Progs Over a year ago

yes, but the input is supposed to bring only the selected objects?

Trisped Over a year ago

You will need to add code which indicates what is selected for me to help you further. Currently this code only converts a 2 dimensional array to a 1 dimensional array.

Progs Over a year ago

there is in the html code, is binded with the ng-model="query"

Trisped Over a year ago

Sorry, I misunderstood, I thought the filter was suppose to be removing elements. I will look at it more when I have time tonight. Your expectation that query should only have the selected items is correct. I will build a plunker or fiddle and let you know.

Trisped Over a year ago

@B.J.A.A. You have to filter the group separate from the option. If you select 11, 12, and 44 in my plunker, you should get two rows in the table (for estados 1 and 4). The first row should have three paragraphs (1 for the estados number and two for localidad 11 and 12). The second row should have two paragraphs (1 for the estados and one for localidad 44). If you still need help, create a new plunker from mine showing the issue, create a new question, and add a comment to this question with the link to the new. I will look at it when I have time.

|

Collectives™ on Stack Overflow

Angularjs Why my filter always get all the array of objects?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related