여기 곰의 작품 fiddle을하는 다른 방법입니다!
function myCtrl($scope) {
$scope.item = {
text: "I am a Bear in the forest. We are two bears climbing a tree.",
search: [{
text: "Bear",
color: "brown"
}, {
text: "forest",
color: "green"
}, {
text: "tree",
color: "orange"
}]
};
}
var app = angular.module('myApp', ['highlightDirective']);
app.controller('myCtrl', ['$scope', myCtrl]);
function highlight() {
var directive = {
restrict: 'E',
scope: {
text: '=',
search: '='
},
link: function link(scope, $element, attr) {
var text = scope.text;
var search = scope.search;
for (var i = 0; i < search.length; i++) {
var s = search[i];
var html = '<span class="highlightText ' + s.color + '">$&</span>';
text = text.replace(new RegExp("\\b" + s.text + "\\b"), html);
}
$element.html(text);
}
};
return directive;
}
var highlightDirectiveModule = angular.module("highlightDirective", []);
highlightDirectiveModule.directive('highlight', highlight);
당신은 데이터 구조를 변경하거나 외부 엔드 포인트는? 데이터 구조를 변경하거나 적용 할 수 있다면 [JsFiddle은 방금 만든 ...] (http://jsfiddle.net/j28kmq42/14/) –
@ The.Bear 변경 요청하지만 가능하면 잘 모르겠습니다. 어쨌든, 당신의 예를 들어 주셔서 감사합니다. 나는 그것을 바탕으로 주위를 고치고 길을 찾을 수 있는지 알아볼 것입니다. 나를 도와 주셔서 정말 고마워요! –