Geek Answers Handbook

Make only one bold letter in the word ionic-angularjs

I would like to know how to set only a specific letter inside a word, in my case the first, in angularJS. For example, I have an array of words like:

var Words = [Mon,Tue,Wed];

I want to show the first letter of each element in bold and the rest of the word in normal font.

+4
source share
3 answers

The presence of the first letter in bold is purely visual, so it should not be reflected in your HTML, but simply controlled by CSS. This is important for the accessibility and usability of our text, as well as for the semantics of HTML.

CSS is used to offer a presentation to users.

::first-letter (:first-letter), MDN

:: first-letter CSS , - (, ).

CSS

p:first-letter {
    font-weight: bold;
}

JSFiddle : http://jsfiddle.net/mtjzsh5v/

, .

+6

, :

<div ng-repeat="value in Words">
    <b>{{value.substring(0,1)}}</b>{{value.substring(1)}}
</div>
+6

:

:: first-letter

 <div ng-controller="MyCtrl">
  <div ng-repeat="Word in Words">
           <p>
             {{Word}}
           </p>
   </div>
</div>

: http://jsfiddle.net/kevalbhatt18/twvy0j4a/9/
, ng-if,
: http://jsfiddle.net/kevalbhatt18/twvy0j4a/8/
Html:
 <div ng-controller="MyCtrl">
  <div ng-repeat="Word in Words">
           <span ng-if="$index === 0" class="bold">{{Word}}- {{$index}}</span>
        <span ng-if="$index !== 0" class="preview">{{Word}}- {{$index}}</span>
   </div>
</div>

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

function MyCtrl($scope) {
    $scope.Words = ['Mon','Tue','Wed'];
}

CSS
< >
 .bold{

    font-weight:bold;
}

+3
 
More articles:

All Articles