[英]change the text apperence using angular js
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 我是角度js的新手使用这个ihave来执行以下操作我有一个文本名称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) {
}
Try to use the directive ng-class
. 尝试使用指令
ng-class
。 Create two boolean, and set values when you click on the buttons. 单击按钮时,创建两个布尔值,并设置值。 When the boolean is changing, the
ng-class
is updating. 当布尔值发生变化时,
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 参考
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.