2017-06-05 1 views
3

Ich versuche Angular simultan mit Pug und SCSS zu lernen, meine aktuelle Ausgabe ist mit dem ng-class Konzept. Mein Code ist wie folgt:Mit Pug und SCSS mit Angular (ng-Modell)

HTML (In Mops)

form 
    input#theSearch(type='text' ng-model="theSearch") 
    br 
    span(ng-class ="{'test': isEven()}") Example Text 

SCSS

.test { 
    color:red; 
    font-size:80px; 
} 

AngularJS

angular.module("root", []) 
    .controller("index",["$scope",function($scope) { 
    $scope.theSearch = 1; 
    $scope.isEven = function() { return $scope.theSearch % 2 === 0; }; 
}]); 

S o, im Idealfall wird dies reagieren, wenn der Benutzer eine gerade Zahl eingibt und die span rot sowie die Größe zu erhöhen. Momentan ändert es sich trotz gleichmäßiger Eingaben nicht. Ich vermute, das ist ein Anfänger-Syntaxfehler, aber jede Anleitung zu diesem Thema würde sehr geschätzt werden.

Side Notes: Ich bin in der CodePen-Umgebung. Pug ist enthalten, SCSS ist enthalten, Bootstrap ist enthalten, Angular 1.6.1, wird benutzt. Das gesamte HTML ist in main.container-fluid(ng-app="root") enthalten. Vielen Dank im Voraus!

+1

erhalten Sie irgendwelche Fehler? Das von Ihnen gepostete Modul funktioniert gut https://codepen.io/srajagop/pen/KqwEJP. – karthick

+0

können Sie Ihren Stift teilen? – karthick

+0

Ich habe es dir dank deinem Codepen herausgefunden! Die Antwort ist unten veröffentlicht. Vielen Dank! –

Antwort

1

Ich habe es herausgefunden dank dem CodePen von karthick! Mein HTML fehlte ng-controller="index" auf dem form Element. Ohne den Controller weiß der $scope nicht, wo er angewendet werden soll (glaube ich). Danke nochmal an karthick!

Verwandte Themen