angularJS 필터를 사용하여 검색 결과에서 검색 텍스트 강조 표시

Question

표시되는 전체 결과 중에서 결과를 필터링하는 데 사용되는 입력 상자가 있습니다. 나는 'startWith'라는 필터를 가지고있다. 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>

Answer 1

그냥 검색에 대해 확인하고 강조 표시된 부분에 클래스를 추가하는 기능을 통해 출력을 실행

여기 내 코드입니다. 소품이 blog for the reg ex (I 정규식 싫어하지만 그들은 잘 작동) 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>

에 기인