Question

我第一次在自定义过滤器上工作，基本主体正在工作（它显示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>

Answer 1

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

从控制器中删除上面的jquery行，而不是尝试使用ng-model指令，因为只有angular才能检测到模型更改

＆＃13;

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;
  }
  
});

＆＃13;

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

＆＃13;

Answer 2

那是因为您没有以Angular-way方式访问该值。

看起来应该是这样的

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

并且您的控制器的范围应该具有相应的属性numberOfCdsByArtist

喜欢这个

$scope.numberOfCdsByArtist = 7;

还要继续阅读有关如何在AngularJs中实现cusotm过滤器函数的内容。例如https://scotch.io/tutorials/building-custom-angularjs-filters

Answer 3

创建自定义过滤器的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>

从输入到Angular范围的值（过滤器）

3 个答案: