採用了棱角分明的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