采用了棱角分明的js更改文本apperence [英] change the text apperence using angular js

问题描述

是新来使用此角的js
IHAVE执行以下操作
我有一个文本名称bob.and像粗体和斜体按钮
而在加粗按钮cliking我要加粗文字BOB
和斜体同时单击倾斜按钮

am new to angular js using this ihave to perform following operation i have a text name bob.and a button like bold and italic while cliking on the bold button i want to bold the text BOB and italic while clicking the italic button

这里是code

HTML

 <div ng-controller="MyCtrl">
      <input type="text" ng-model="rootFolders" ng-init="rootFolders='Bob'" >
          <button ng-click="chiliSpicy()">bold</button>
     <button ng-click="jalapenoSpicy()">italic</button>
    <br>{{rootFolders}}
    </div>

code

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

    function MyCtrl($scope) {   

    }

jfiddle

推荐答案

在这里是工作提琴小提琴

HTML

<div ng-controller="MyCtrl">
  <input type="text" ng-model="rootFolders" ng-init="rootFolders='Bob'" >
 <button ng-click="chiliSpicy()">bold</button>
 <button ng-click="jalapenoSpicy()">italic</button>
     <span class="{{class}}">
         {{rootFolders}}
     </span>
      <br>rootFolders={{rootFolders}}
</div>

JS：

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

function MyCtrl($scope) {
$scope.class=""    
    $scope.chiliSpicy=function(){
    $scope.class="text_type_bold"
    }
       $scope.jalapenoSpicy=function(){
    $scope.class="text_type_italic"
    }
}

CSS：

.text_type_bold{
    font-style:none;
 font-weight:bold;
}

.text_type_italic{
    font-weight:normal;
 font-style:italic;
}

这篇关于采用了棱角分明的js更改文本apperence的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！