渡す引数に基づいてデータを返すフィルター関数を作成しました。コントローラーにも同じ機能が必要です。コントローラーでフィルター機能を再利用することは可能ですか?
これは私がこれまでに試したことです：
function myCtrl($scope,filter1)
{
// i simply used the filter function name, it is not working.
}
542101 次
15 に答える
1056
コントローラーに$filterを注入する
function myCtrl($scope, $filter)
{
}
次に、そのフィルターを使用する場所で、次のように使用します。
$filter('filtername');
そのフィルターに引数を渡したい場合は、別の括弧を使用して行います。
function myCtrl($scope, $filter)
{
$filter('filtername')(arg1,arg2);
}
はフィルタリングarg1する配列で、 はフィルタリングにarg2使用されるオブジェクトです。
于 2013-01-13T09:42:20.110 に答える
255
@Prashanth が提供する回答は正しいですが、同じことを行うさらに簡単な方法があります。基本的に、依存関係を注入し、$filterそれを呼び出す厄介な構文 ( $filter('filtername')(arg1,arg2);) を使用する代わりに、フィルター名とFilterサフィックスという依存関係を注入できます。
質問から例を挙げると、次のように書くことができます。
function myCtrl($scope, filter1Filter) {
filter1Filter(input, arg1);
}
Filter使用している命名規則に関係なく、フィルター名に追加する必要があるfooFilter
ことに注意してください。fooFilterFilter
于 2013-01-13T12:19:23.637 に答える
80
次のサンプル コードを使用すると、角度コントローラーの配列を名前でフィルター処理できます。これは以下の説明による。 http://docs.angularjs.org/guide/filter
this.filteredArray = filterFilter(this.array, {name:'Igor'});
JS:
angular.module('FilterInControllerModule', []).
controller('FilterController', ['filterFilter', function(filterFilter) {
this.array = [
{name: 'Tobias'},
{name: 'Jeff'},
{name: 'Brian'},
{name: 'Igor'},
{name: 'James'},
{name: 'Brad'}
];
this.filteredArray = filterFilter(this.array, {name:'Igor'});
}]);
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example96-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.3/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="FilterInControllerModule">
<div ng-controller="FilterController as ctrl">
<div>
All entries:
<span ng-repeat="entry in ctrl.array">{{entry.name}} </span>
</div>
<div>
Filter By Name in angular controller
<span ng-repeat="entry in ctrl.filteredArray">{{entry.name}} </span>
</div>
</div>
</body>
</html>
于 2014-03-28T04:22:05.167 に答える
48
filterAngular コントローラーで使用する別の例を次に示します。
$scope.ListOfPeople = [
{ PersonID: 10, FirstName: "John", LastName: "Smith", Sex: "Male" },
{ PersonID: 11, FirstName: "James", LastName: "Last", Sex: "Male" },
{ PersonID: 12, FirstName: "Mary", LastName: "Heart", Sex: "Female" },
{ PersonID: 13, FirstName: "Sandra", LastName: "Goldsmith", Sex: "Female" },
{ PersonID: 14, FirstName: "Shaun", LastName: "Sheep", Sex: "Male" },
{ PersonID: 15, FirstName: "Nicola", LastName: "Smith", Sex: "Male" }
];
$scope.ListOfWomen = $scope.ListOfPeople.filter(function (person) {
return (person.Sex == "Female");
});
// This will display "There are 2 women in our list."
prompt("", "There are " + $scope.ListOfWomen.length + " women in our list.");
シンプルですね。
于 2015-09-09T12:22:21.157 に答える
40
これを行うには 3 つの方法があります。
最初の文字のみのパラメーターを使用して、文字列を大文字に変換する次の単純なフィルターがあるとします。
app.filter('uppercase', function() {
return function(string, firstCharOnly) {
return (!firstCharOnly)
? string.toUpperCase()
: string.charAt(0).toUpperCase() + string.slice(1);
}
});
直接通して$filter
app.controller('MyController', function($filter) {
// HELLO
var text = $filter('uppercase')('hello');
// Hello
var text = $filter('uppercase')('hello', true);
});
注: これにより、すべてのフィルターにアクセスできます。
$filterに割り当てるvariable
このオプションを使用すると、$filterlike aを使用できますfunction。
app.controller('MyController', function($filter) {
var uppercaseFilter = $filter('uppercase');
// HELLO
var text = uppercaseFilter('hello');
// Hello
var text = uppercaseFilter('hello', true);
});
特定のものだけを読み込むFilter
フィルタ名に を追加すると、特定のフィルタのみをロードできますFilter。
app.controller('MyController', function(uppercaseFilter) {
// HELLO
var text = uppercaseFilter('hello');
// Hello
var text = uppercaseFilter('hello', true);
});
どちらを使用するかは個人的な好みですが、最も読みやすいオプションであるため、3 番目のオプションを使用することをお勧めします。
于 2016-02-16T15:43:56.143 に答える
15
function ngController($scope,$filter){
$scope.name = "aaaa";
$scope.age = "32";
$scope.result = function(){
return $filter('lowercase')($scope.name);
};
}
コントローラー メソッドの 2 番目の引数名は "$filter" である必要があり、この例ではフィルター機能のみが機能します。この例では、「小文字」フィルターを使用しました。
于 2014-11-16T03:18:50.563 に答える
12
私のプロセス用に作成した別の例があります。
このような値の説明を持つ配列を取得します
states = [{
status: '1',
desc: '\u2713'
}, {
status: '2',
desc: '\u271B'
}]
私のFilters.jsで：
.filter('getState', function () {
return function (input, states) {
//console.log(states);
for (var i = 0; i < states.length; i++) {
//console.log(states[i]);
if (states[i].status == input) {
return states[i].desc;
}
}
return '\u2718';
};
})
次に、テスト変数 (コントローラー):
function myCtrl($scope, $filter) {
// ....
var resp = $filter('getState')('1', states);
// ....
}
于 2013-05-28T18:18:17.710 に答える
2
コントローラーで $filter を使用した単純な日付の例は次のとおりです。
var myDate = new Date();
$scope.dateAsString = $filter('date')(myDate, "yyyy-MM-dd");
ここで説明したように - https://stackoverflow.com/a/20131782/262140
于 2016-12-25T05:35:43.777 に答える
1
最初に $filter をコントローラーに注入し、ngSanitize がアプリ内にロードされていることを確認します。後でコントローラー内での使用法は次のとおりです。
$filter('linky')(text, target, attributes)
于 2018-03-07T03:38:12.953 に答える
1
コントローラーでオブジェクトをフィルタリングする場合は、これを試してください
var rateSelected = $filter('filter')($scope.GradeList, function (obj) {
if(obj.GradeId == $scope.contractor_emp.save_modal_data.GradeId)
return obj;
});
これは、 if条件に従ってフィルタリングされたオブジェクトを返します
于 2018-11-16T09:13:08.070 に答える
0
Angular.js フィルターの再利用 - ビュー / コントローラー
このソリューションでは、Angular フィルターの再利用について説明しています。これはデータをフィルタリングするもう 1 つの方法であり、Google は必要なときにここにたどり着きました。共有するのが好きです。
使用事例
ビューの ng-repeat などで既にフィルタリングしている場合 (以下のように)、さらに次のようにコントローラーでフィルターを定義している可能性があります。そして、最後の例のように再利用できます。
フィルターの使用例 - ビューでフィルターされた繰り返し
<div ng-app="someApp" ng-controller="someController">
<h2>Duplicates</h2>
<table class="table table-striped table-light table-bordered-light">
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in data | filter: searchDuplicate:true">
<td>{{person.name}}</td>
<td>{{person.gender}}</td>
</tr>
</tbody>
</table>
</div>
Angular フィルター定義の例
angular.module('someApp',[])
.controller('someController', function($scope, $filter ) {
$scope.people = [{name: 'Bob', gender: 'male' , hasDuplicate: true },
{name: 'Bob', gender: 'male' , hasDuplicate: true },
{name: 'Bob', gender: 'female', hasDuplicate: false}];
$scope.searchDuplicate = { hasDuplicate : true };
})
したがって、ここでの概念は、ビュー用に作成されたフィルターを既に使用しており、それをコントローラーでも使用したいことに気付くということです。
コントローラー内でのフィルター関数の使用例 1
var dup = $filter('filter')($scope.people, $scope.searchDuplicate, true)
コントローラー内でのフィルター関数の使用例 2
前のフィルターを使用して、重複が見つからない場合にのみボタンを表示します。
HTML ボタン
<div ng-if="showButton()"><button class="btn btn-primary" ng-click="doSomething();"></button></div>
表示/非表示ボタン
$scope.doSomething = function(){ /* ... */ };
$scope.showButton = function(){ return $filter('filter')($scope.people, $scope.searchDuplicate, true).length == 0; };
このバージョンのフィルタリングは簡単だと思う人もいるかもしれませんが、これは Angular.js のオプションです。
ビューと $filter 関数呼び出しで使用されるオプションのコンパレータ パラメータ "true" は、厳密な比較が必要であることを指定します。省略した場合、複数の列にまたがって値を検索できます。
于 2020-05-20T23:06:57.773 に答える