I have two array de objetos
that are fed by the same rest
, one feeds a visual list and the other keeps the original data brought in the response.
I have a input
type text
that is used as a list search engine for any property that the objects contain.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $filter) {
$scope.actividadesShow = [{
id: 1,
nombre: 'Actividad 1',
codigo: 89466,
responsable: 'Bender'
}, {
id: 1,
nombre: 'Actividad 2',
codigo: 89714,
responsable: 'Bender'
}, {
id: 1,
nombre: 'Actividad 3',
codigo: 89755,
responsable: 'Bender'
}];
$scope.actividades = [{
id: 1,
nombre: 'Actividad 1',
codigo: 089466,
responsable: 'Bender'
}, {
id: 1,
nombre: 'Actividad 2',
codigo: 089714,
responsable: 'Bender'
}, {
id: 1,
nombre: 'Actividad 3',
codigo: 089755,
responsable: 'Juan'
}];
$scope.$watch('buscarActividad', function(value){
if (value != undefined) {
$scope.actividadesShow = $filter('filter')($scope.actividades, value);
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="buscarActividad">
<ul>
<li ng-repeat="actividad in actividadesShow track by $index">
{{ actividad.codigo }} - {{ actividad.nombre }}
</li>
</ul>
</div>
Thus, the system works correctly, I can search by person in charge and it shows me those who are assigned to the person in charge.
The problem is that I need to make a search engine that searches for multiple values separated by commas and that's where I don't know how to do it, I tried passing an array
al $filter
but it didn't work and no matter how hard I search in google I don't understand the solutions they propose or they are too extensive solutions .
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $filter) {
$scope.actividadesShow = [{
id: 1,
nombre: 'Actividad 1',
codigo: 89466,
responsable: 'Bender'
}, {
id: 1,
nombre: 'Actividad 2',
codigo: 89714,
responsable: 'Bender'
}, {
id: 1,
nombre: 'Actividad 3',
codigo: 89755,
responsable: 'Bender'
}];
$scope.actividades = [{
id: 1,
nombre: 'Actividad 1',
codigo: 089466,
responsable: 'Bender'
}, {
id: 1,
nombre: 'Actividad 2',
codigo: 089714,
responsable: 'Bender'
}, {
id: 1,
nombre: 'Actividad 3',
codigo: 089755,
responsable: 'Juan'
}];
$scope.$watch('buscarActividad', function(value){
if (value != undefined) {
$scope.actividadesShow = $filter('filter')($scope.actividades, value.split(', '));
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="buscarActividad">
<ul>
<li ng-repeat="actividad in actividadesShow track by $index">
{{ actividad.codigo }} - {{ actividad.nombre }}
</li>
</ul>
</div>
So how can I pass several values to the filter? Is it possible or should I use other methods?
You can do the following:
buscarActividad
This sample example is useful for any framework since it only uses Native Javascript functions.
You could do it exactly the same as in the first case, but using the Array class's filter function and a custom function to compare: