angularjs: ändern filter-Optionen dynamisch

Was ich will, ist so etwas wie diese Beispiel in der Dokumentation, aber mit einem eindeutigen input -, spielen die drei Rollen von filtern nach "alle", "name" oder "phone" Eigenschaften, die Veränderung der Rolle erfolgt durch einen Anker auf.
Hier ist der code fertig http://jsfiddle.net/ubugnu/QuyCU/ Wie kann ich ein update für das ng-model Attribut dynamisch?

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

Können Sie definieren ng-model wie: ng-model="search[filter]" dynamisch zu ändern, um welche variable es sein sollte gebunden (wo filter ist ein weiterer $scope variable).

Sehen Fiedel:
http://jsfiddle.net/lopisan/vzQKk/1/

Müssen Sie fügen Sie diese Zeile im controller:
```
$scope.search = {name:'', phone:'', $:''};
```
Und die Eingabe ändern:
```
<input type="text" ng-model="search[filter]">
```
ausgezeichnet, vielen Dank
Dies funktioniert nicht ganz, in der Geige...versuchen Sie eine Suche für 'a' und auf 'Telefon'. Es erscheint die Suche auf "Alle" ohne Rücksicht auf den link geklickt. Ich denke, es braucht nur ein kleines zwicken oder zwei zu arbeiten, obwohl.
Ich denke, es funktioniert ok, aber vielleicht ein bisschen nicht-intuitiv (aber es zeigen sich die Lösung schön) - wenn Sie auf "Alle|mit Namen|Per Telefon", es ist nur links unten textbox zu einer entsprechenden oberen Textfelder. Also Eingabe von 'a' füllt das 'a' auf "Alle" und klicken auf "per Telefon" - Schalter unten textbox auf "Telefon" so weiter eingeben Telefon hinzufügen Einschränkungen verlassen "jeder" beschränken allein..
Erstaunlich, ich kann nicht genug danken u 🙂
Gibt es eine Möglichkeit, über filter nach "name" und "Telefon" NUR

InformationsquelleAutor lopisan

Hier ist ein Ansatz - es gibt wahrscheinlich noch andere.

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

vielen Dank 🙂

InformationsquelleAutor S McCrohan

Hier ist ein weiterer einfacher Ansatz Verwendung von radio-buttons

<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

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.