回答:
$ filterをコントローラーに注入する
function myCtrl($scope, $filter)
{
}
次に、そのフィルターを使用する場所はどこでも、次のように使用します。
$filter('filtername');
そのフィルターに引数を渡したい場合は、別々の括弧を使用してください:
function myCtrl($scope, $filter)
{
$filter('filtername')(arg1,arg2);
}
arg1
は、フィルタリングする配列であり、フィルタリングにarg2
使用されるオブジェクトです。
var anyNumber = $filter('number')(12.222222, 2);
に数値フィルターを使用できます12.22
。
$filter("currency")(price, "$", 2)
したがって、価格= 200の場合、その式は「$ 200.00」を返します。
$filter('filtter1')
(2 t)を使用してもエラーに気付かないでしょう。ただし、filtter1Filter
Angular を注入すると、依存関係が存在しないとすぐに文句が表示されます。
@Prashanthが提供する回答は正しいですが、同じことを行う簡単な方法もあります。基本的に、$filter
依存関係を$filter('filtername')(arg1,arg2);
挿入してそれを呼び出すという厄介な構文を使用する代わりに()、依存関係を挿入できます:フィルター名とFilter
サフィックス。
質問から例をとると、次のように書くことができます:
function myCtrl($scope, filter1Filter) {
filter1Filter(input, arg1);
}
使用Filter
している命名規則に関係なく、フィルター名に追加する必要があることに注意してくださいfooFilter
。fooはfooFilter を呼び出して参照され、fooFilterはfooFilterFilter
次のサンプルコードを使用して、角度コントローラーの配列を名前でフィルター処理できます。これは以下の説明に基づいています。 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>
filter
Angularコントローラで使用する別の例を次に示します。
$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.");
シンプルですね。
文字列を大文字に変換する次の単純なフィルターがあり、最初の文字のみのパラメーターがあるとします。
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
Aへvariable
このオプションを使用すると、の$filter
ように使用できます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番目を使用することをお勧めします。
私は私のプロセスのために作った別の例があります:
このような値の説明を持つ配列を取得します
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);
// ....
}
AngularJsを使用すると、テンプレート内またはコントローラー、ディレクティブ内などでフィルターを使用できます。
テンプレートでは、この構文を使用できます
{{ variable | MyFilter: ... : ... }}
コントローラーの内部では、$ filterサービスの注入を使用できます
angular.module('MyModule').controller('MyCtrl',function($scope, $filter){
$filter('MyFilter')(arg1, arg2);
})
デモの例がもっと必要な場合は、ここにリンクがあります
ビューから構文を反映するフィルターを評価する別の方法があります。呼び出しは複雑ですが、そのショートカットを作成できます。文字列の構文がビューにあるものと同じであることを気に入っています。このように見えます:
function myCtrl($scope, $interpolate) {
$scope.$eval($interpolate( "{{ myvar * 10 | currency }} dollars." ))
}
コントローラで$ filterを使用する簡単な日付の例は次のようになります:
var myDate = new Date();
$scope.dateAsString = $filter('date')(myDate, "yyyy-MM-dd");
最初に$ filterをコントローラーに挿入し、ngSanitizeがアプリ内に読み込まれるようにします。後でコントローラーの使用方法内で次のようになります。
$filter('linky')(text, target, attributes)
Angular.jsフィルターの再利用-ビュー/コントローラー
このソリューションは、角度フィルターの再利用をカバーしています。これはデータをフィルタリングするためのもう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.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"は、厳密な比較が必要であることを指定します。省略すると、複数の列で値を検索できます。