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;
  }
}); 

Answer 1

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

---

Steps:

1. Remove multiple="multiple" from the select tag, you only need the one.

2. 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.

3. 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>

4. 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.