【问题标题】:Input field filters not working in AngularJS输入字段过滤器在 AngularJS 中不起作用
【发布时间】:2016-03-03 02:16:19
【问题描述】:

我已经在this fiddle成功实现了几乎所有类型的过滤器:

<div data-ng-app='' data-ng-init="vehicles=[
                   {type:'car',color:'red'},
                   {type:'bike',color:'black'}]">
  <h1>
        AngularJS <a href='http://www.w3schools.com/angular/angular_filters.asp'>
        Filters Example</a>
    </h1>

  <p>Enter text
    <input type='text' data-ng-model='abc' />
  </p>
  <p>The text you entered is
    <br/> <a href='http://www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_uppercase'>Upper case</a> {{ abc | uppercase }}
    <br/><a href='http://www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_lowercase'>Lower case</a> {{ abc | lowercase }}</p>Enter amount
  <input type='number' data-ng-model='num1' />
  <p>The <a href='http://www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_currency'>amount</a> you entered is
    <br/>{{ num1 | currency }}</p> <a href='http://www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_orderby'> Directives Filter example</a>

  <br/>Vehicles filtered by type:
  <ul data-ng-repeat="v in vehicles | orderBy:'type'">
    <li>{{"Vehicle type is "+v.type +" with color "+ v.color}}</li>
  </ul>
  <br/>Vehicles <a href='http://www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_input'>filtered by user input:</a>

  <br/>
  <input type="text" ng-model='test' />
  <ul data-ng-repeat="v in vehicles | filter: 'test' | orderBy:'type'">
    <li>{{"Vehicle type is "+v.type +" with color "+ v.color}}</li>
  </ul>
</div>

除了input filters,一切正常。

这就是我现在的seeing它:

为什么数组没有被用户输入打印和过滤?

【问题讨论】:

    标签: javascript arrays angularjs html


    【解决方案1】:

    从传递给过滤器的'test' 中删除单引号。由于它不是字符串,它是一个模型,应该直接传递给过滤器。

    <ul data-ng-repeat="v in vehicles | filter: test | orderBy:'type'">
        <li>{{"Vehicle type is "+v.type +" with color "+ v.color}}</li>
    </ul>
    

    上面的代码可以工作。

    【讨论】:

    • 谢谢@VVK - 所以它澄清了输入过滤器不需要引号。请问在这种情况下还需要避免什么?
    猜你喜欢
    • 1970-01-01
    • 2015-03-03
    • 2015-11-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多