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（私は正規表現を憎むが、彼らはうまく動作） 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>

によるものです