instantsearch + ng-switch
9 views
Skip to first unread message
Dong Koo
Sep 8, 2017, 8:28:16 AM9/8/17
to FrAngular - AngularJS en français
Bonjour,
je suis parti de ce code :
https://codepen.io/shahansha/pen/pvWJyv
et j'essaye d'afficher une div avec ng-switch-when en fonction de l'input
le html
le JS
je récupère donc bien la valeur sur cette ligne :
je suis parti de ce code :
https://codepen.io/shahansha/pen/pvWJyv
et j'essaye d'afficher une div avec ng-switch-when en fonction de l'input
le html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="js/index.js"></script>
</head>
<body ng-app="instantSearch" ng-controller="InstantSearchController">
<div >
<input type="text" ng-model="searchString" placeholder="Entrez votre code postal"/>
{{searchString}}<!--pour vérifier l'input-->
</div>
<div ng-switch="searchString" >
<div ng-switch-default >
<p><strong>l'affichage par défaut </strong></p>
</div>
<div ng-switch-when="{{searchString}}"><!--valeur de l'input à insérer-->
<ul>
<li ng-repeat="i in items | searchFor:searchString">
<p>{{i.adresse}}<br>{{i.rue}}<br>{{i.ville}}<br>{{i.tel}}<br>{{i.fax}}<br> <br></p>
</li>
</ul>
</div>
<div>
</body>
</html>le JS
// Define a new module for our app
var app = angular.module("instantSearch", []);
// Create the instant search filter
app.filter('searchFor', function(){
return function(arr, searchString){
if(!searchString){
return arr;
}
var result = [];
searchString = searchString.toLowerCase();
// Using the forEach helper method to loop through the array
angular.forEach(arr, function(item){
if(item.title.toLowerCase().indexOf(searchString) !== -1){
result.push(item);
}
});
return result;
};
});
// The controller
function InstantSearchController($scope){
$scope.items = [
{ title: '2000',adresse: ' toto ',rue: ' Rue truc ', ville: ' paris ', tel: ' Tél : 0000000 ', fax: ' Fax : 00000 ' }
];
}je récupère donc bien la valeur sur cette ligne :
{{searchString}}<!--pour vérifier l'input-->
Mais mon switch ne marche pas ici
<div ng-switch-when="{{searchString}}"><!--valeur de l'input à insérer-->
Merci pour votre aide.
Reply all
Reply to author
Forward
0 new messages