采用了棱角分明的js

Question

上午更改文本apperence新的使用该 IHAVE执行以下操作 我有一个文本名bob.and像粗体和斜体 按钮角JS，而在加粗按钮cliking我想大胆文字BOB 和斜体，同时单击倾斜按钮

这里是代码

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> 

代码

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

    function MyCtrl($scope) { 

    } 

jfiddle

Answer 1

这里是工作提琴fiddle

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; 
} 

Answer 2

尝试使用指令ng-class。创建两个布尔值，并在单击按钮时设置值。当布尔变化时，ng-class正在更新。

Live demo

HTML：

<div ng-controller="MyCtrl" ng-init="bold = false; italic = false"> 
    <input type="text" ng-model="rootFolders" ng-init="rootFolders='Bob'" /> 
    <button ng-click="bold = !bold"> 
     Bold 
    </button> 
    <button ng-click="italic = !italic"> 
     Italic 
    </button> 
    <br/> 
    <span ng-class="{'bold': bold, 'italic': italic}"> 
     {{rootFolders}} 
    </span> 
</div> 

CSS：

.bold { 
    font-weight: bold 
} 

.italic{ 
    font-style : italic; 
} 

---

参考

• AngularJS ngClass
• AngularJS ngInit