使用angularJS過濾器在搜索結果中突出顯示搜索文本

我有一個輸入框用於過濾顯示的總體結果中的結果。我有一個過濾器'startWith'。現在，我需要突出顯示在 angularJS中顯示的搜索結果中的搜索文本。使用angularJS過濾器在搜索結果中突出顯示搜索文本

例如，當我在搜索框中鍵入'o'時，它應該突出顯示橙色的'O'。

你能幫我實現嗎？

這裏是我的代碼：

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', ['$scope', function($scope) { 
 
$scope.myData = [{ 
 
    'name': 'Orange' 
 
}, { 
 
    'name': 'Banana' 
 
}, { 
 
    'name': 'Mango' 
 
}, { 
 
    'name': 'Apple' 
 
}, { 
 
    'name': 'Pineapple' 
 
}]; 
 
$scope.startWith = function(actual, expected) { 
 
    var lowerStr = (actual + "").toLowerCase(); 
 
    return lowerStr.indexOf(expected.toLowerCase()) === 0; 
 
} 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<div id="parentDiv" ng-app="myApp" ng-controller="myCtrl"> 
 
    <input type="text" ng-model="search.name" class="searchText" id="search_txt" placeholder="Search Data" /> 
 
    <div id="childDiv"> 
 
    <p ng-repeat="obj in myData | filter:search:startWith" >{{obj.name}}</p> 
 
    </div> 
 
</div>

來源

2017-10-13 Sunny

只需通過函數運行輸出要檢查你的搜索，並添加一個類來突出顯示部分。道具是由於這個blog for the reg ex（我討厭正則表達式，但他們的工作很好）也google

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', ['$scope', function($scope) { 
 
$scope.myData = [{ 
 
    'name': 'Orange' 
 
}, { 
 
    'name': 'Banana' 
 
}, { 
 
    'name': 'Mango' 
 
}, { 
 
    'name': 'Apple' 
 
}, { 
 
    'name': 'Pineapple' 
 
}]; 
 
$scope.startWith = function(actual, expected) { 
 
    var lowerStr = (actual + "").toLowerCase(); 
 
    return lowerStr.indexOf(expected.toLowerCase()) === 0; 
 
} 
 
$scope.highlight = function(text, phrase) { 
 
    if (phrase) { 
 
     text = text.replace(new RegExp('('+phrase+')', 'gi'), 
 
     '<span class="highlighted">$1</span>') 
 
    } 
 
    return text; 
 
} 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<div id="parentDiv" ng-app="myApp" ng-controller="myCtrl"> 
 
    <input type="text" ng-model="search.name" class="searchText" id="search_txt" placeholder="Search Data" /> 
 
    <div id="childDiv"> 
 
    <p ng-repeat="obj in myData | filter:search:startWith" >{{highlight(obj.name)}}</p> 
 
    </div> 
 
</div>

來源

2017-10-14 16:33:46 mark

使用angularJS過濾器在搜索結果中突出顯示搜索文本

回答

相關問題