使用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过滤器在搜索结果中突出显示搜索文本

回答

相关问题