入力から角度範囲（フィルタ）への値

Question

私はカスタムフィルタで初めて作業しています。基本的なプリンシパルが動作しています（7歳以上のアーティストのCDをすべて表示しています）。 。私は値（それは同じ値「7」を維持し、すべての時間を変更するとしかし、それはフィルタを更新しませんこれは私がこれまで持っているものです。

HTMLのINPUT

<input type="number" value="7" id="numberOfCdsByArtist"> 

CONTROLLER：

$scope. = function (Artist) { 
    var numberOfCdsByArtist = $('#numberOfCdsByArtist')[0].value; 
    return Artist.numberOfCDs >= numberOfCdsByArtist ; 
} 

NG-REPEAT：。

<div class="Artists" ng-repeat="Artist in Artists | orderBy:'Name' | filter:CDnumber"> 
    <div>{{Artist.Name}}{{Artist.numberOfCDs}} 
</div> 

Answer 1

あなたはアンギュラウェイの値にアクセスしていないためだ

それはこの

<input type="number" ng-model="numberOfCdsByArtist"> 

のようになりますそして、あなたのコントローラの範囲は、先に行くと1つのcusotmを実装する方法について読むこの

$scope.numberOfCdsByArtist = 7; 

のようにプロパティnumberOfCdsByArtist

に対応している必要がありますAngularJsのフィルタ関数その後、唯一の角がモデルチェンジを検出することができますので、ここでは一例https://scotch.io/tutorials/building-custom-angularjs-filters

Answer 2

var numberOfCdsByArtist = $('#numberOfCdsByArtist')[0].value; 

をするために、代わりに、コントローラから上記jqueryの行を削除NG-モデルディレクティブを使用してみてください

angular.module('A', []).controller('C', function ($scope) { 
 
    $scope.cdNo = 0; 
 
    $scope.artists = [ 
 
    { name: 'Artist 1', cdNo: 1 }, 
 
    { name: 'Artist 2', cdNo: 2 }, 
 
    { name: 'Artist 3', cdNo: 3 }, 
 
    { name: 'Artist 4', cdNo: 4 }, 
 
    { name: 'Artist 5', cdNo: 5 }, 
 
    { name: 'Artist 6', cdNo: 6 }, 
 
    { name: 'Artist 7', cdNo: 7 } 
 
    ]; 
 
    
 
    $scope.cdNumFilter = function (artist) { 
 
    return artist.cdNo >= $scope.cdNo; 
 
    } 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
 
<section ng-app="A" ng-controller="C"> 
 
    
 
    <input type="number" ng-model="cdNo" min="0"/> 
 
    
 
    <ul> 
 
    <li ng-repeat="artist in artists | filter: cdNumFilter">{{ artist.name }}:{{ artist.cdNo }}</li> 
 
    </ul> 
 
    
 
</section>

Answer 3

jsfiddleカスタムフィルタの例を作成しました。 。あなたはjQueryの経由で値を取得したい場合は...これはあなたに役に立つかもしれチェック

JSFiddle link

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

 
app.controller("MyCtrl", function($scope) { 
 
    $scope.numberOfCdsByArtist = 7; 
 

 
    $scope.Artists = [{ 
 
     "Name": "abc1", 
 
     "numberOfCDs": 10 
 
    }, { 
 
     "Name": "abc2", 
 
     "numberOfCDs": 1 
 
    }, { 
 
     "Name": "abc3", 
 
     "numberOfCDs": 3 
 
    }, { 
 
     "Name": "abc4", 
 
     "numberOfCDs": 5 
 
    }, { 
 
     "Name": "abc5", 
 
     "numberOfCDs": 8 
 
    }, { 
 
     "Name": "abc6", 
 
     "numberOfCDs": 9 
 
    }, { 
 
     "Name": "abc7", 
 
     "numberOfCDs": 12 
 
    }, { 
 
     "Name": "abc8", 
 
     "numberOfCDs": 2 
 
    }, { 
 
     "Name": "abc9", 
 
     "numberOfCDs": 7 
 
    }, { 
 
     "Name": "abc10", 
 
     "numberOfCDs": 6 
 
    } 
 

 
    ]; 
 
}); 
 

 
app.filter("customFilter", function() { 
 
    return function(input, cdNumber) { 
 

 

 
    var out = []; 
 
    angular.forEach(input, function(artist) { 
 
     if (artist.numberOfCDs >= cdNumber) { 
 
     out.push(artist); 
 
     } 
 
    }); 
 
    return out; 
 
    }; 
 

 
});

<div ng-controller="MyCtrl"> 
 
    <input type="number" ng-model="numberOfCdsByArtist"> 
 

 
    <div class="Artists" ng-repeat="Artist in Artists | customFilter:numberOfCdsByArtist "> 
 
    <div>{{Artist.Name}} :- {{Artist.numberOfCDs}} 
 
    </div> 
 

 
    </div>