2017-05-30 95 views
0

我有一個代碼可以過濾一個字段並標記與輸入搜索相關的單詞。我需要這個過濾器,不僅通過標題,而且通過名稱。我如何修改代碼以便在編寫時篩選標題和名稱?通過Angular.js中的兩個字段進行篩選

<li ng-repeat="item in data | filter:search.title" 
    ng-bind-html="item.title | highlight:search.title"> 
</li> 

http://jsfiddle.net/sgo3wxwc/

+1

我在代碼中的任何地方都找不到'name'。 –

+0

我仍然無法找到'name' .. –

+0

@MariaInesParnisari look http://jsfiddle.net/sgo3wxwc/ – yavg

回答

0

您可以通過對象收集送他們兩個或兩個以上選項來過濾:

<li ng-repeat="item in data | filter:{title:search.title,name:search.name}" 
    ng-bind-html="item.title | highlight:search.title"> 
</li> 

它建議使用過濾器控制器,以避免$他們

消化週期
+0

如何在同一行顯示兩個元素? – yavg

+0

你可以這樣綁定

{{item.title - item.name}}

+0

我修改鏈接。 http://jsfiddle.net/sgo3wxwc/我的問題仍在繼續.. – yavg

0
<div ng-app="myApp" ng-controller="myCtrl"> 
     <input type="text" placeholder="Search" ng-model="search.title"> 
    <ul> 
     <!-- with filter --> 
     <li ng-repeat="item in data | filter:{title:search.title,name:search.name}" 
    ng-bind-html="item.title | highlight:search.title"> 
     {{item}} 
     </li> 
     </ul> 
</div> 

腳本代碼在這裏:

var app = angular.module("myApp", []); 
app.controller("myCtrl", function($scope) { 
    $scope.data = [ 
      { title: "Bad",name:'bill' }, 
      { title: "Good",name:'Goe' }, 
      { title: "Great",name:'Brad' }, 
      { title: "Cool",name:'yan' }, 
      { title: "Excellent",name:'mikle' }, 
      { title: "Awesome",name:'mosa' }, 
      { title: "Horrible",name:'morteza' }, 
      ] 

}).filter('highlight', function($sce) { 
    return function(text, phrase) { 
     if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'), 
     '<span class="highlighted">$1</span>') 

     return $sce.trustAsHtml(text) 
    } 
    }) 
+0

它不適用於我http://jsfiddle.net/sgo3wxwc/ – yavg

+0

它的工作,但突出顯示不工作https://jsfiddle.net/e4njevts/ –

+0

即時通訊編輯代碼請檢查:https://jsfiddle.net/e4njevts/1/ –

相關問題