從輸入到角度範圍（過濾器）的值

我正在第一次使用自定義過濾器，並且基本主體正在工作（它顯示從7開始的所有藝術家的CD）。但是一旦我更改值（它保持相同的值「7」所有的時間不更新濾波這是我到目前爲止有：從輸入到角度範圍（過濾器）的值

HTML INPUT

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

控制器：

$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>

來源

2016-06-21 Ewald Bos

如果你想獲得通過jQuery的價值：$（ '＃numberOfCdsByArtist'）VAL（）;. 。你推薦使用ng-modal，而不是在angularjs控制器中使用jQuery來描述值。 –

Typo：它應該是'ng-model' –

那是因爲你不是在訪問中角路值

它應該是這個樣子

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

與控制器的範圍應該有相應的屬性numberOfCdsByArtist

喜歡這個

$scope.numberOfCdsByArtist = 7;

而且繼續前進，瞭解應該如何實現cusotm在AngularJs中過濾函數。例如這裏https://scotch.io/tutorials/building-custom-angularjs-filters

來源

2016-06-21 12:00:04

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>

來源

2016-06-21 12:03:52

工作得很好，謝謝Akhil。你有一個想法，以及如果我從一個cookie中獲得一個值：var number = getCookie（「GetCdsByArtist」）; document.getElementById（「numberOfCdsByArtist」）。value = number;在它替換輸入中的vlaue之前。當然現在不再是了。我想使用cookie信息，並以此爲起點，而不是cdNo = 0會很高興擁有cdNo = CookieNumber –

您可以使用角度的$ cookie作爲它， https://docs.angularjs.org/ api/ngCookies/service/$ cookies 因此而不是$ scope.cdNo = 0;你可以使用像$ scope.cdNo = $ cookies.get（key） –

創建自定義過濾器的jsfiddle示例。檢查這可能對你有幫助...

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>

來源

2016-06-21 12:22:46

從輸入到角度範圍（過濾器）的值

回答

相關問題