カスタムフィルタの角度フィルタリングはここ

を選択した私のバイオリンhttp://jsfiddle.net/7mcj04or/カスタムフィルタの角度フィルタリングはここ

である私は、この事は仕事を得ることができない、私は私が選択したチェックボックスにカスタムフィルタを作成しようとしています。ここに私のコードは次のとおりです。

HTML：

<div ng-controller="AppCtrl"> 
<label class="item-input-wrapper"> 
    <input type="text" placeholder="Search" ng-model="searchTerm"> 
</label> 
<div ng-repeat="l in letter"> 
<input ng-model="letter" type="checkbox" ng-checked="exists(l,selected)" ng-click="toggle(l, selected)">Letter {{l}} 
</div> 
    <div ng-repeat="name in names | filter: searchTerm"> 
     <p> 
     {{name}} 
     </p> 
    </div> 
    <pre ng-bind="selected | json"></pre> 
</div>

JS：

var app = angular.module('starter', []); 

app.controller('AppCtrl', function ($scope, $http) { 
$scope.searchTerm = ''; 
$scope.names = ['Jimmy','Farris','Lance', 'Joaquin', 'Henry']; 
$scope.letter = ['L','E','Y', 'H', 'U']; 
$scope.selected = []; 
$scope.toggle = function (item, list) { 
    var idx = list.indexOf(item); 
    if (idx > -1) { 
     list.splice(idx, 1); 
    } 
    else { 
     list.push(item); 
    } 
    }; 

    $scope.exists = function (item, list) { 
    return list.indexOf(item) > -1; 
    }; 

}); 

app.filter('selectedLetter', function() { 
// filter to check array of elements 
return function (selected) { 


    return selected; 
    } 
});

私はNG-repeatが次のようになりたい：カスタム選択

<div ng-repeat="name in names | filter: searchTerm"> 
     <p> 
     {{name | selectedLetter}} 
     </p> 
</div>

フィルタIは、書き込みしようとすると、私が選択したチェックボックスにフィルタリングされません。だからLetter Lを選択したときにLanceを表示させたいです。

ここでもまた私のフィドルは検索対象です。カスタムフィルタではありません。

http://jsfiddle.net/7mcj04or/

出典

2016-10-07 Ren44

あなたはフィルタを逃しているとあなたがフィルタリングするために間違った構文を使用していたこの http://jsfiddle.net/Iceman52489/k8r4qLge/4/

を試してみてください。

出典

2016-10-08 16:48:11

ここで何をしたのか分かりません。私はもう検索できません。チェックボックスが正しく機能していない。私は、名前を表示し、チェックボックスと検索でフィルターに掛けることができるようにしたい。これはしていません – Ren44

フィルタ機能を見てください。ブールリターンを逆にする。私がやったのはフィルターをつけることだった。 jsfiddleでフィルタを呼び出していなかったため、フィルタに空白の機能がありました。 –

申し訳ありません申し訳ありませんが、フィルタを使用して検索を実行しようとしていて、検索機能を置き換えたものがフィルタに置き換えられました。

これに気づいたように2つの方法がありますが、1つは$ scopeメソッドを使用し、もう1つはフィルタを通過する方法です。フィルタのルートを通って、コントローラの下で宣言した空のフィルタを使用していませんでした。それは私の混乱でした。

JS：ここに更新されたコードです

var app = angular.module('starter', []); 
 

 
app.controller('AppCtrl', function($scope, $http) { 
 
    $scope.searchTerm = ''; 
 
    $scope.names = ['Jimmy', 'Farris', 'Lance', 'Joaquin', 'Henry']; 
 
    $scope.letter = ['L', 'E', 'Y', 'H', 'U']; 
 
    $scope.selected = []; 
 
    $scope.toggle = function(item, list) { 
 
    var idx = list.indexOf(item); 
 
    if (idx > -1) { 
 
     list.splice(idx, 1); 
 
    } else { 
 
     list.push(item); 
 
    } 
 
    }; 
 

 
    $scope.exists = function(item) { 
 
    return item.indexOf(item) > -1; 
 
    }; 
 

 
}); 
 

 
app.filter('selectedLetter', function() { 
 
    // filter to check array of // filter to check array of elements 
 

 
    return function(items, letter) { 
 

 
    return items.filter(function(item) { 
 
     return (item.length && letter.join('').indexOf(item.charAt(0)) == -1); 
 
    }); 
 
    } 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> 
 
</head> 
 

 
<body ng-app="starter"> 
 
    <div ng-controller="AppCtrl"> 
 
    <label class="item-input-wrapper"> 
 
     <input type="text" placeholder="Search" ng-model="searchTerm"> 
 
    </label> 
 
    <div ng-repeat="l in letter"> 
 
     <input ng-model="letter" type="checkbox" ng-checked="exists(l, selected)" ng-click="toggle(l, selected)">Letter {{l}} 
 
    </div> 
 
    <div ng-repeat="name in $names = (names | filter: searchTerm | selectedLetter:selected)"> 
 
     <p> 
 
     {{name}} 
 
     </p> 
 
    </div> 
 
    <pre ng-bind="selected | json"></pre> 
 
    </div> 
 

 
</body> 
 

 
</html>

最後には、あなたを介してパイプのフィルターをすることができるので、私は2つのルートの1つを選択することをお勧めします。しかし、フィルタを直接使用すると、出力する前に配列をフィルタリングする必要があります。そのため、変数をng-repeatのコピーに設定するのはこのためです。お役に立てれば！（また、チェックボックスがフィルタリングされていない場合は、フィルタで条件を逆にするだけです）

出典

2016-10-09 05:45:11

カスタムフィルタの角度フィルタリングはここ

答えて

関連する問題