2017-01-18 4 views
0

Une question rapide:Filtre pour résultat de recherche avec AngularJS

Je crée un filtre AngularJS pour obtenir dynamiquement une variable et doit être utilisé comme celui-ci de frontend.

<div ng-if="(services | searchValue : 'type' : 'facebook').active == true"> 
... 
</div> 

C'est le javascript.

.filter('searchValue', function() { 
     return function (array, name_var, value) { 
      angular.forEach(array, function(v, k) { 
       if (v[name_var] == value) { 
        return v; 
       } 
      }); 
      return []; 
     }; 
    }) 

Malheureusement, même si le résultat a été trouvé, il n'a pas été transmis au modèle.

Si je vais l'utiliser comme ceci:

{{(services | searchValue : 'type' : 'facebook')}} 

Cela n'obtiendra aucune valeur. Toute suggestion?

+0

je pense que ce devrait être comme (services | searchValue: 'type') –

Répondre

1

J'ai créé un exemple d'exemple pour les informations que vous avez fournies. Exécutez l'exemple de vérification ci-dessous. J'espère que cela vous aide.

Je suppose que ng-if attend seulement la variable et non l'expression. fournissez uniquement la variable avec la valeur i.e (services | searchValue : 'type' : 'facebook').activeet non l'expression.

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

 
app.filter('customfilter', function() { 
 
    return function(array, name_var, value) { 
 
    var filteredArray = {}; 
 
    angular.forEach(array, function(v, k) { 
 
     if (v[name_var] == value) { 
 
     filteredArray = v; 
 
     return false; 
 
     } 
 
    }); 
 
    return filteredArray; 
 
    } 
 

 
}); 
 
app.controller('sampleController', function($scope, $filter) { 
 
    $scope.data = [{ 
 
    "type": "facebook", 
 
    "active": false 
 
    }, { 
 
    "type": "linkedin", 
 
    "active": false 
 
    }, { 
 
    "type": "twitter", 
 
    "active": false 
 
    }, { 
 
    "type": "google", 
 
    "active": false 
 
    }]; 
 

 
    $scope.anotherdata = [{ 
 
    "type": "facebook", 
 
    "active": true 
 
    }, { 
 
    "type": "linkedin", 
 
    "active": false 
 
    }]; 
 
});
<script data-require="[email protected]" src="https://code.angularjs.org/1.3.17/angular.js" data-semver="1.3.17"></script> 
 

 
<body ng-app="application"> 
 
    <div ng-controller="sampleController"> 
 

 
    First div - Active : false 
 
    <div ng-if="(data | customfilter:'type':'facebook').active"> 
 
     Your div content goes over here 
 
    </div> 
 
    <br> 
 
    <br>Second div - Active : true 
 
    <div ng-if="(anotherdata | customfilter:'type':'facebook').active"> 
 
     Second div rendered 
 
    </div> 
 
    </div> 
 
</body>