Question

我想知道如何在一个单词中设置一个特定的字母，在我的情况下是第一个，在angularJS中。例如，我有一系列的单词，如：

var Words = [Mon,Tue,Wed];

我想用粗体显示每个元素的第一个字母，用正常字体显示其余部分。

Answer 1

在视图中，当然：

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

Answer 2

首字母大胆是纯粹的视觉效果，因此它不应该反映在您的HTML中，而应该完全由CSS管理。这对于我们的文本的可访问性和可用性很重要，也尊重HTML semantics.

CSS用于向人类用户推荐其演示文稿。

有一个名为::first-letter (:first-letter)的属性可以很好地运行，并且very well describe on MDN

:: first-letter CSS pseudo-element选择第一个字母块的第一行，如果它没有任何其他内容（例如图像或内联表格）。

这是CSS的例子

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

和JSFiddle进行一些测试：http://jsfiddle.net/mtjzsh5v/

希望这对你有用。

Answer 3

修改：

使用:: 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; }

的

在ionic-angularjs中只做一个粗体字母

3 个答案: