javascript
  • html
  • arrays
  • angularjs
  • html5
  • 2015-11-29 47 views 1 likes 
    1

    我已經成功實施幾乎所有類型的過濾器this fiddle在AngularJS不工作輸入字段過濾器

    <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現在:

    no output

    爲什麼不打印,並通過用戶輸入過濾陣列?

    回答

    2

    刪除傳遞給過濾器的單引號'test'。由於它不是一個字符串,它的一個模型,它應該直接傳遞給過濾器。

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

    上述代碼將起作用。

    +0

    謝謝@VVK - 所以它澄清說,輸入過濾器不需要報價。在這種情況下需要避免的東西嗎? – xameeramir

    相關問題