Как мы можем подчеркнуть n-ю букву в угловом ng-повторении?

Question

Как мы можем подчеркнуть n-ю букву в угловом ng-повторении?

0

У меня есть требование в моем проекте. У меня есть заголовки, загруженные в переменную области с http-вызова:

 $scope.titleObject = [{
     "title": "Title1",
     "underlinekey": "t" }, {
     "title": "Sub-Heading",
     "underlinekey": "u" }, {
     "title": "Heading text",
     "underlinekey": "a" }, {
     "title": "Some Title",
     "underlinekey": "o" }, {
     "title": "More Title",
     "underlinekey": "r" }];

Теперь я хочу печатать заголовки в html с подчеркнутой n-й буквой, где n - "подчеркнутая кнопка",

Мой html:

<div class="titleCont">
    <div ng-repeat="title in titleObject">{{title.title}}</div>  
</div>

Результат, который я получаю:

Title1

Подзаголовок

Заголовок текста

Некоторое название

Больше заголовка

Какое мое требование:

Title1

Подзаголовок

Заголовок текста

Некоторое название

Больше заголовка

Sunny Khanuja 27 июнь 2015, в 17:01

Источник

Теги:

angularjs

angularjs-scope

angularjs-ng-repeat

2 ответа

0

Если вы хотите связать html с ng-bind-html вы должны сначала запустить его через $sce.trustAsHtml. Кроме этого, вы можете просто сгенерировать HTML с заменой строки обычным способом.

<div ng-repeat="title in ::titleObject" ng-bind-html=underlineTitle(title)>

$scope.underlineTitle = function (title) {
    return $sce.trustAsHtml(
        title.title.replace(
            title.underlinekey,
            "<u>" + title.underlinekey + "</u>"
        )
    );
};

Удостоверьтесь, что вы используете только теги с HTML, которым вы доверяете/фактически генерируете.

http://plnkr.co/edit/0pFGjaKYxN87TvQZbw6l?p=preview

Explosion Pills 27 июнь 2015, в 13:50

Ещё вопросы

Walter Chapilliquen - wZVanG · Accepted Answer · 2015-06-27T13-41-00.000Z

С директивой может быть:

.directive('underline', function(){
  return {
    scope: {
      underline: "="
    },
    link: function(scope, element){
       var html = scope.underline.title.replace(new RegExp("(" + scope.underline.underlinekey +")"), "<u>$1</u>");
       element.html(html)
    }
  }
})

<div ng-repeat="title in titleObject">
  <div underline="title"></div>
</div>

Демо 1

Демо 2 с атрибутами

Мне нравится это решение. Я бы порекомендовал атрибуты для записи и замены, так как это позволит вам использовать директиву без конкретного определения объекта.
@ExplosionPills Хороший вопрос, в таком случае вы бы порекомендовали два атрибута или просто ключ ?, title как атрибут или .text() ?
Два атрибута имеют наибольшее значение для меня
@ExplosionPills хорошая мысль, я поставил еще один тест, спасибо.