0

コントローラーにアレイがあります

$scope.arr = [......], a

nd in html やりたい

ng-repeat = "item in arr | color:'blue'" //this line works, filter done in the app.filter way.

ここで、color は arr 内のすべてのオブジェクトの属性です。

この color:'blue' をカスタマイズ可能にし、sub in color:'red' にするにはどうすればよいですか?

また、html の代わりにコントローラ フィルタリングを行いたい場合、構文はどうなるでしょうか。

$scope.filteredArr = $filter('color')($scope.arr,'blue');

エラーを出している

http://jsfiddle.net/x3azn/YpMKX/

投稿されたフィドル、-1 を削除してください

4

1 に答える 1

2

color:'blue'format の任意の式でカスタマイズできるため、フィルターが定義されていて現在のスコープに存在する場合、次のfilter:expressionようなものcolor:myColorがうまく機能します。colormyColor

コントローラーでも同じことができます。

$scope.filteredArr = $filter('color')($scope.arr,myColor);

jsFiddle の例に基づく例を次に示します。

Javascript: 

angular.module('app', [])
    .filter('eyecolor', function () {
        return function ( people, color ) {
            var arr = [];
            for ( var i = people.length; i--; ) {
                if ( people[i].eyeColor === color ) {
                    arr.push( people[i] );
                }
            }
            return arr;
        }
    })
    .controller('ctrl', function ($scope, $filter) {
        $scope.desiredColor = 'Brown';
        $scope.people = [
            {       
                name: 'Bob',
                eyeColor: 'Brown'
            }, {
                name: 'Katherine',
                eyeColor: 'Yellow'
            }, {
                name: 'Chun',
                eyeColor: 'Black'
            }
        ];
        $scope.peopleFilter = $filter('eyecolor')( $scope.people, $scope.desiredColor );
    });

HTML: 

<div ng-app="app">
    <div ng-controller="ctrl">Color Desired:
        <input ng-model="desiredColor" /><br/>        
        <div ng-repeat="person in people | eyecolor: desiredColor">
            HTML filter: {{person.name}} has eye color {{person.eyeColor}}</div>
        <div ng-repeat="person in peopleFilter">
            Controller filter: {{ person.name }} has eye color {{ person.eyeColor }}</div>
    </div>
</div>
于 2013-04-29T13:27:15.250 に答える