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

【问题标题】：Value from input to Angular scope (filter)从输入到 Angular 范围（过滤器）的值
【发布时间】：2016-10-22 23:00:57
【问题描述】：

我第一次在自定义过滤器上工作，基本原理正在工作（它显示艺术家从 7 岁及以上的所有 cd）。但是，一旦我更改值，它就不会更新过滤器（它始终保持相同的值“7”。这是我到目前为止所拥有的：

HTML 输入

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

控制器：

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

NG-重复：

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

【问题讨论】：

如果你想通过 jQuery 获取值：$('#numberOfCdsByArtist').val();..你应该使用 ng-modal 而不是在 angularjs 控制器中使用 jQuery 获取值跨度>
错字：应该是ng-model

标签： javascript angularjs input filter angularjs-ng-repeat

【解决方案1】：

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

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

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>

【讨论】：

工作得很好，谢谢 Akhil。如果我从 cookie 中获取值，您是否也有想法： var number = getCookie("GetCdsByArtist"); document.getElementById("numberOfCdsByArtist").value = number;在它替换输入中的值之前。现在当然不是了。我想使用 cookie 信息并将其作为起点，而不是 cdNo = 0 有 cdNo = CookieNumber
你可以使用 Angular 的 $cookies，docs.angularjs.org/api/ngCookies/service/$cookies 所以而不是 $scope.cdNo = 0;您可以使用类似 $scope.cdNo = $cookies.get(key)

【解决方案2】：

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

它应该看起来像这样

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

并且你的控制器的作用域应该有相应的属性 numberOfCdsByArtist

这样

$scope.numberOfCdsByArtist = 7;

还可以继续阅读有关如何在 AngularJs 中实现 cusotm 过滤器功能的信息。例如这里https://scotch.io/tutorials/building-custom-angularjs-filters

【讨论】：

【解决方案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>

【讨论】：