ng-Klasse Umfang Variable nicht funktioniert

Ich versuche, CSS hinzufügen, basierend auf einem Umfang Variable in Angular JS:ng-Klasse Umfang Variable nicht funktioniert

<html> 
<head> 
    <style type="text/css"> 
     body {color: black; font-size: 10px;} 
     .redcolor {color: red; font-size: 20px} 
     .greencolor {color: green; font-size: 100px} 
    </style> 
</head> 
<body ng-app="app"> 
    <div ng-controler="controller"> 
     <span ng-class="{redcolor: test1.isRed, greencolor: test1.isGreen}">Span1</span><br/><br/> 
     <span ng-class="{redcolor: test2.isRed, greencolor: test2.isGreen}">Span2</span> 
    </div> 

    <script src="angular.js"></script> 
    <script type="text/javascript"> 
    angular.module('app',[]) 
    .controller('controler', function($scope) { 
     $scope.test1 = {isRed: true, isGreen: false}; 
     $scope.test2 = {isRed: false, isGreen: true}; 
    }); 
    </script> 
</body> 
</html>

Wenn ich laufe dieses Programm es nur, um die CSS Körper Anwendung. Ich brauche Spannweite 1 mit Stil von redColor und Span 2 mit Stil von greenColor.

Bitte helfen Sie mir, was das Problem in diesem Code ist.

Quelle

2017-05-14 user3181365

Es gibt einige Probleme mit Ihrem Code,

(i) Es sollte ng-controller statt ng-controler

(ii) Auch Ihr Controller Name ist sein controler nicht controller

Ändern Sie es wie folgt,

DEMO

angular.module('app',[]) 
 
    .controller('controler', function($scope) { 
 
     $scope.test1 = {isRed: true, isGreen: false}; 
 
     $scope.test2 = {isRed: false, isGreen: true}; 
 
    });

<html> 
 
<head> 
 
<style type="text/css"> 
 
     body {color: black; font-size: 10px;} 
 
     .redcolor {color: red; font-size: 20px} 
 
     .greencolor {color: green; font-size: 100px} 
 
    </style> 
 
</head> 
 
<body ng-app="app"> 
 
    <div ng-controller="controler"> 
 
      <span ng-class="{redcolor: test1.isRed, greencolor: test1.isGreen}">Span1</span><br/><br/> 
 
    <span ng-class="{redcolor: test2.isRed, greencolor: test2.isGreen}">Span2</span> 
 

 
    </div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script> 
 
</body> 
 
</html>

Quelle

2017-05-14 07:17:41 Sajeetharan

Vielen Dank, ich für die Entwicklung Eclipse IDE bin mit so nicht in der Lage, die grundlegenden Fehler zu finden. Kannst du mir bitte eine bessere IDE für die Entwicklung von AngularJS-Apps empfehlen, die Vorschläge und Korrekturen enthalten können? – user3181365

Sie können Visual Studio-Code verwenden und verwenden Sie die eckigen Snippets und Intelligenz erkennt automatisch die Fehler für Sie – Sajeetharan

Ich bin von Java-Hintergrund, so wurde mit Eclipse. Ist Visual Studio-Code freie Software, kann ich sie für mein Projekt verwenden? – user3181365

ng-Klasse Umfang Variable nicht funktioniert

Antwort

Verwandte Themen