javascript - 使用angular js更改文本外观

Question

我是 Angular js 的新手我必须执行以下操作我有一个文本名称 bob. 和一个像粗体和斜体一样的按钮在单击粗体按钮时，我想将文本 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 .创建两个 bool 值，并在单击按钮时设置值。当 bool 值发生变化时，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