Herausfiltern in for-Schleife

Ich versuche, eine Dropdown-Liste zu erstellen, und wenn ich es erstelle, möchte ich nach einem Feld filtern. Zum Beispiel:Herausfiltern in for-Schleife

<!DOCTYPE html> 
 
    <html> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
    <body> 
 

 
    <div ng-app="myApp" ng-controller="myCtrl"> 
 

 
    <select ng-model="cost" ng-options="x.cost for x in costs"> 
 
    </select> 
 

 
    </div> 
 

 
    <script> 
 
    var app = angular.module('myApp', []); 
 
     app.controller('myCtrl', function($scope) { 
 
     $scope.costs = [{'cost': 1, 'difficulty' : 3}, {'cost': 2, 'difficulty' : 2}, {'cost': 3, 'difficulty' : 3}]; 
 
    }); 
 
    </script> 
 

 
    <p>This example shows how to fill a dropdown list using the ng-options directive.</p> 
 

 
    </body> 
 
    </html>

Wie würde ich durch difficulty in diesem Beispiel filtern?

$scope.myFilter = function(x) { 
    return x.difficulty >= 3; 
    }

und wenden es in ng-options wie folgt aus::

<select ng-model="cost" ng-options="x.cost for x in costs | filter : myFilter"> 
</select>

Demo unter:

Ist es möglich, so etwas wie

ng-options="x.cost for x in costs where x.difficulty >= 3"

Quelle

2016-10-28 user123

Es klingt wie Sie einen [Angular Filter] verwenden möchten (https://docs.angularjs.org/api/ng/filter/filter). – Skylar

Verwenden Sie eine benutzerdefinierte filter wie dies zu tun

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.costs = [{ 
 
    'cost': 1, 
 
    'difficulty': 3 
 
    }, { 
 
    'cost': 2, 
 
    'difficulty': 2 
 
    }, { 
 
    'cost': 3, 
 
    'difficulty': 3 
 
    }]; 
 

 
    $scope.myFilter = function(x) { 
 
    return x.difficulty >= 3; 
 
    } 
 
});

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 
<body> 
 

 
    <div ng-app="myApp" ng-controller="myCtrl"> 
 

 
    <select ng-model="cost" ng-options="x.cost for x in costs | filter : myFilter"> 
 
    </select> 
 

 
    </div> 
 

 
    <p>This example shows how to fill a dropdown list using the ng-options directive.</p> 
 

 
</body> 
 

 
</html>

Quelle

2016-10-28 17:03:46 kukkuz

Es gibt mehrere Möglichkeiten, dies zu erreichen. - Verwenden Sie einen benutzerdefinierten Filter - Filtern Sie die Listen auf der Controller-Ebene und binden Sie sie entsprechend an die Ansicht.

Hier ist, was Sie tun könnten.

var app = angular.module("sampleApp", []); 
 

 
app.controller("sampleController", ["$scope", 
 
    function($scope) { 
 
    $scope.data = "Hello"; 
 
    $scope.difficulty = 3; 
 
    $scope.costs = [{ 
 
     'cost': 1, 
 
     'difficulty': 3 
 
    }, { 
 
     'cost': 2, 
 
     'difficulty': 2 
 
    }, { 
 
     'cost': 3, 
 
     'difficulty': 3 
 
    }]; 
 

 
    $scope.filteredCosts = $scope.costs.filter(function(item) { 
 
     return item.difficulty >= 3 
 
    }); 
 

 
    } 
 
]); 
 

 
app.filter("difficultyFiler", function() { 
 
    return function(costs, difficulty) { 
 
    return costs.filter(function(item) { 
 
     return item.difficulty >= difficulty 
 
    }); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> 
 
<div ng-app="sampleApp"> 
 
    <div ng-controller="sampleController"> 
 

 
    <select ng-model="cost"> 
 
     <option ng-repeat="item in costs"> 
 
     {{item.cost}} 
 
     </option> 
 
    </select> 
 

 
    <select ng-model="cost"> 
 
     <option ng-repeat="item in filteredCosts"> 
 
     {{item.cost}} 
 
     </option> 
 
    </select> 
 

 
    <input type="text" ng-model="difficulty" /> 
 

 
    <select ng-model="cost"> 
 
     <option ng-repeat="item in costs | difficultyFiler : difficulty"> 
 
     {{item.cost}} 
 
     </option> 
 
    </select> 
 
    </div> 
 

 
    <p>This example shows how to fill a dropdown list using the ng-options directive.</p> 
 

 
</div> 
 
</div>

Quelle

2016-10-28 17:14:14 Sreekanth

Herausfiltern in for-Schleife

Antwort

Verwandte Themen