Angularjs: применить жирный стиль к персонажу внутри ng-repeat

Question

Angularjs: применить жирный стиль к персонажу внутри ng-repeat

0

У меня есть список:

$scope.list = ["test/test1/test2/test3","test3/test5/test6"];

Я хотел бы применить жирный стиль к / characters при отображении списка:

<div ng-repeat="path in list">
   <p style="font-weight:bold">{{path}}</p>
</div>

Есть ли у вас идеи, как я могу это достичь?

скрипка

AshBringer 01 июнь 2016, в 15:32

Источник

1

Невозможно в вашем сценарии выше, если вы не разделите их, чтобы они попадали в первый или последний элемент, чтобы объявить их через :after или :before .
Nitesh 01 июнь 2016, в 13:33
0

Создать простой фильтр подсветки.
dfsq 01 июнь 2016, в 13:44

Теги:

angularjs

css

4 ответа

2

Существует несколько способов сделать это. Сначала я бы добавил функцию к вашему контроллеру, пусть он называется boldSlashes.

function boldSlashes(path) {
     return path.replace("/","<b>/</b>")
}

Затем измените свой html следующим образом:

<div ng-repeat="path in list" ng-bind-html>
   boldSlashes({{path}})
</div>

Ng-bind-html говорит угловым, чтобы обрабатывать содержимое как html и не избегать его.

Вам также нужно ввести ngSanitize в ваш модуль, чтобы использовать ng-bind-html.

Поэтому везде, где вы создаете свой модуль, добавьте ngSanitize в зависимости, например:

angular.module( 'MYAPP', [ngSanitize])

Mike Feltman 01 июнь 2016, в 11:55

0

Я не уверен, что это то, что вы пытаетесь сделать, но я выделил отдельные элементы. Также шрифт jsfiddle полужирный шрифт выглядит точно так же на символе /.

http://jsfiddle.net/3a2duqg4/ 1. Обновлено представление к списку 2. Изменен массив, чтобы иметь отдельный элемент в разделе 3. Добавлены стили к "/" и реализовано свойство шрифта bold с шрифтом по умолчанию скрипта не выглядели иначе.

<div ng-controller="MyCtrl">
    <ul>
        <li class="list" ng-repeat="path in list">{{path}} <span>/</span></li>
    </ul>
</div>

Добавлены элементы в список, а не в абзац, и добавлены некоторые стили. Я обновил ваш массив, чтобы иметь одно значение для элемента массива.

Позвольте мне знать, если это помогает! :)

Thumper34 01 июнь 2016, в 13:08

0

Извините, я не вижу никакой разницы с предоставленной скрипкой
AshBringer 01 июнь 2016, в 14:19
0

извиняюсь! Я схватил не ту ссылку, попробуйте это. jsfiddle.net/pkpp4zah/1
Thumper34 01 июнь 2016, в 14:28

0

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.list = ["test/test1/test2/test3","test3/test5/test6"];
    $scope.updateString = function(s) {
    	return s.replace(/\//g, '<span class="bold">/</span>');
    };
}

.bold {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <div ng-repeat="path in list">
      <p ng-bind-html-unsafe="updateString(path)"></p>
    </div>
  </div>
</div>

Mohammad Usman 01 июнь 2016, в 11:46

Ещё вопросы

Невозможно в вашем сценарии выше, если вы не разделите их, чтобы они попадали в первый или последний элемент, чтобы объявить их через :after или :before .
Создать простой фильтр подсветки.
Извините, я не вижу никакой разницы с предоставленной скрипкой
извиняюсь! Я схватил не ту ссылку, попробуйте это. jsfiddle.net/pkpp4zah/1

aseferov · Accepted Answer · 2016-06-01T12-32-00.000Z

вы можете сделать это просто с str.replace http://jsfiddle.net/k18vgtvw/

 <p style="font-weight:bold" ng-bind-html-unsafe="csc(path)"></p>

контроллер

  $scope.csc = function(path) {
    return path.replace(/\//g, "<span style='color:red'>/</span>");
  }