zmienić apperence tekstu przy użyciu kątowe JS

Question

jestem nowy kątowych js korzystających z tej ihave do wykonywania następujących operacji mam nazwę tekstową bob.and przycisk jak pogrubienie i kursywa podczas cliking przycisk pogrubioną chcę pogrubić tekst BOB i kursywa podczas klikania przycisku kursywy

oto kod

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> 

kod

var app = angular.module('myApp',[]); 

    function MyCtrl($scope) { 

    } 

jfiddle

Answer 1

tutaj jest ryba pracujących 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

Spróbuj użyć dyrektywy ng-class. Twórz dwie wartości boolowskie i ustawiaj je po kliknięciu przycisków. Po zmianie wartości boolowskiej następuje aktualizacja aktualizacji 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; 
} 

---

referencyjny

• AngularJS ngClass
• AngularJS ngInit