使用角度js更改文本外觀

Question

我是角度js的新手使用這個ihave來執行以下操作我有一個文本名稱bob.and一個像粗體和斜體的按鈕，同時按下粗體按鈕我想要加粗文本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

嘗試使用指令ng-class 。 單擊按鈕時，創建兩個布爾值，並設置值。 當布爾值發生變化時， ng-class正在更新。

現場演示

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

Answer 2

這是一個工作小提琴

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