angularjs: modifier les options de filtre dynamiquement

Ce que je veux, c'est quelque chose comme cette exemple dans la documentation, mais avec une entrée unique qui peut jouer les trois rôles de filtrage par "tout", "nom" ou "téléphone" propriétés", le changement de rôle est fait par une ancre cliquez sur.
Voici le code de prêts http://jsfiddle.net/ubugnu/QuyCU/ Comment puis-je mettre à jour le ng-attribut du modèle dynamiquement?

HTML

<div ng-app>
  <div ng-controller="MainCtrl">

      <label>Any</label> <input type="text" ng-model="search.$"> <br>
      <label>Name only</label> <input type="text" ng-model="search.name"><br>
      <label>Phone only</label> <input type="text" ng-model="search.phone"><br>

      <div style="background-color:#FAE8F1">
      <hr>

      <label>Filter</label> <input type="text" ng-model="search.$"> by {{filter}} <br>
      <ul>
      <li><a href="" ng-click="changeFilterTo('$')">Any</a></li>
      <li><a href="" ng-click="changeFilterTo('name')">By Name</a></li>
      <li><a href="" ng-click="changeFilterTo('phone')">By phone</a></li>
      </ul>

      <hr>
      </div>

      <table class="table">
        <tr><th>Name</th><th>Phone</th></tr>
        <tr ng-repeat="friend in friends | filter:search">
          <td>{{friend.name}}</td>
          <td>{{friend.phone}}</td>
        </tr>
      </table>
  </div>
</div>

function MainCtrl($scope, $http) {
    $scope.friends = [{name:'John', phone:'555-1276'},
                      {name:'Mary', phone:'800-BIG-MARY'},
                      {name:'Mike', phone:'555-4321'},
                      {name:'Adam', phone:'555-5678'},
                      {name:'Julie', phone:'555-8765'}];
    $scope.filter = "$";
    $scope.changeFilterTo = function(pr) {
        $scope.filter = pr; 
    }
};

InformationsquelleAutor ubugnu | 2013-06-26

angularjs javascript

19

Vous pouvez définir ng-model comme: ng-model="search[filter]" de modifier dynamiquement à quelle variable il doit être appliqué (où filter est un autre $scope variable).

Voir le violon:
http://jsfiddle.net/lopisan/vzQKk/1/

Vous devez ajouter cette ligne au contrôleur:
```
$scope.search = {name:'', phone:'', $:''};
```
Et de changement d'entrée:
```
<input type="text" ng-model="search[filter]">
```
- Ce n'est pas tout à fait, dans le violon...essayez de faire une recherche pour 'a' et en cliquant sur "téléphone". Il semble être à la recherche sur "Tous", quel que soit le lien cliqué. Je pense qu'il faut seulement un petit tweak ou deux de travail, cependant.
- Je pense que cela fonctionne bien, mais peut-être un peu non-intuitive (mais c'démontrer la solution gentiment) - lorsque vous cliquez sur "Tout|Par Nom ou Par téléphone", c'est simplement des liens en bas de zone de texte à l'une des correspondantes de la partie supérieure des zones de texte. Donc en tapant 'un' remplit la " une " à "Tout" et en cliquant sur "par téléphone" interrupteurs en bas de zone de texte pour "téléphone" alors, la prochaine tapant ajouter téléphone contraintes de quitter "tout" contraindre seul..
- Incroyable je ne peux pas remercier u assez 🙂
- Est-il possible d'avoir un filtre par "nom" et "Téléphone" SEULEMENT
- Très intelligent de la solution!
InformationsquelleAutor lopisan

Voici une approche - il y a probablement d'autres.

<div ng-app>
  <div ng-controller="MainCtrl">
      <div style="background-color:#FAE8F1">
      <hr>

      <label>Filter</label> <input type="text" ng-model="multi"> by {{filter}}         <br>
      <ul>
      <li><a href="" ng-click="changeFilterTo('$')">Any</a></li>
      <li><a href="" ng-click="changeFilterTo('name')">By Name</a></li>
      <li><a href="" ng-click="changeFilterTo('phone')">By phone</a></li>
      </ul>

      <hr>
      </div>

      <table class="table">
        <tr><th>Name</th><th>Phone</th></tr>
        <tr ng-repeat="friend in friends | filter:getFilter()">
          <td>{{friend.name}}</td>
          <td>{{friend.phone}}</td>
        </tr>
      </table>
  </div>
</div>

Javascript:

function MainCtrl($scope, $http) {
    $scope.friends = [{name:'John', phone:'555-1276'},
                      {name:'Mary', phone:'800-BIG-MARY'},
                      {name:'Mike', phone:'555-4321'},
                      {name:'Adam', phone:'555-5678'},
                      {name:'Julie', phone:'555-8765'}];
    $scope.filter = "$";
    $scope.multi = "";
    $scope.changeFilterTo = function(pr) {
        $scope.filter = pr; 
    }
    $scope.getFilter = function() {
        switch ($scope.filter) {
            case 'name':
                return {name: $scope.multi};
            case 'phone':
                return {phone: $scope.multi};
            default:
                return {$: $scope.multi}
        }
    }
};

InformationsquelleAutor S McCrohan

Voici une autre approche simple à l'aide de boutons radio

<input type="text" ng-model="search[filter]">

<label>filter by these</label>

<label>Any <input type="radio" ng-model="filter" ng-init="filter = '$'" value="$"></label>
<label>name<input type="radio" ng-model="filter" value="name"></label>
<label>phone<input type="radio" ng-model="filter" value="phone"></label>

InformationsquelleAutor Mangopop

Vous devez vous connecter pour publier un commentaire.