Wert von Eingang zu Winkelbereich (Filter)

Question

Ich arbeite zum ersten Mal an einem benutzerdefinierten Filter und das Grundprinzip funktioniert (es zeigt alle CD's des Künstlers ab 7 an). . Allerdings ist es nicht das Filter aktualisieren, sobald ich den Wert zu ändern (es hält den gleichen Wert „7“ die ganze Zeit Dies ist, was ich bisher:

HTML INPUT

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

REGLER:

$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

das ist, weil Sie nicht den Wert in Angular-Wege-Zugriff

Es sollte

etwa so aussehen

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

und Umfang sollten die dem Controller haben Eigenschaft entsprechenden numberOfCdsByArtist

Gefällt Ihnen dieses

$scope.numberOfCdsByArtist = 7; 

Auch vor und lesen Sie gehen darüber, wie man cusotm implementieren sollten Filterfunktionen in AngularJs. Zum Beispiel hier https://scotch.io/tutorials/building-custom-angularjs-filters

Answer 2

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

Entfernen Sie die oben jquery Linie von der Steuerung, versuchen Sie stattdessen eine ng-Modell Direktive, weil dann nur die Winkel der Modellwechsel

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>

erkennen kann

Answer 3

Erstellt jsfiddle Beispiel eines benutzerdefinierten Filters. Prüfen Sie dies hilfreich sein können, um Sie ...

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>