javascript 使用 angular js 更改文本外观
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24161630/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
change the text apperence using angular js
提问by Psl
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
我是 Angular js 的新手，使用这个我必须执行以下操作我有一个文本名称 bob.and 一个像粗体和斜体这样的按钮，同时点击粗体按钮 我想在单击斜体按钮时将文本 BOB 和斜体加粗
here is the code
这是代码
html
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) {
}
采纳答案by semirturgay
here is a working fiddle fiddle
这是一个工作小提琴
HTML:
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:
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:
CSS：
.text_type_bold{
font-style:none;
font-weight:bold;
}
.text_type_italic{
font-weight:normal;
font-style:italic;
}
回答by R3tep
Try to use the directive ng-class. Create two boolean, and set values when you click on the buttons. When the boolean is changing, the ng-classis updating.
尝试使用指令ng-class。创建两个布尔值，并在单击按钮时设置值。当布尔值发生变化时，ng-class正在更新。
HTML:
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:
CSS:
.bold {
font-weight: bold
}
.italic{
font-style : italic;
}
Reference
参考
