2016-04-13 9 views
0

düzgün çalışmıyor, paragraf arka planda kırmızı açmalısınız. Ayrıca, neden varsayılan ben paragrafta mavi arka plan alıyorum tarafından (Birisi bana yardımcı olabilir? Modeli sayfa yüklemesinde boş değere sahip olarak şeffaf olmalıdır?ng sınıf, programı izleyen yılında 'angularjs'

<html> 
<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script> 
    <style> 
    .red{background:red;} 
    .blue{background:blue;} 
    </style> 
</head> 
<body ng-app="myApp" ng-controller="myCtrl"> 
    <input type="text" ng-model="color" /> 
    <p ng-class="{'red':color==red,'blue':color==blue}">This is a paragraph.</p> 
<script> 
    //1 module declaration 
    var app = angular.module('myApp', []); 
    //2 controller declaration 
    app.controller('myCtrl',function($scope){ 
     //code here 
    }); 
</script> 
</body> 
</html> 
+3

Dize karşılaştırmasında alıntılar kullanın. ng-class = "{'red': color == 'kırmızı', 'mavi': renk == 'mavi'}" '[** Demo **] (https://jsfiddle.net/tusharj/x1t2outd /) – Tushar

+0

Siz bir nesneye eşittir ama girişte bir dize iletirsiniz – SuperComupter

+0

Tanımlanmamışsa, undefined ile eşit değil ise tanımlıyor – zamarrowski

cevap

4

herhangi değişkenleri yok red veya blue yerde tanımlanmış, böylece onların değer beklediğinizden farklı karşılaştırma geçtiği, undefined olarak değerlendirilir.

dizeleri tırnak'red' ve 'blue', ile karşılaştırın.

+1

Neden "blue" varsayılan olarak bildiriliyor – Tushar

+0

Çünkü "blue" kırma karşılaştırması uygulanmış ve "arka plan" için en yüksek öncelik. – deceze

+1

[Chrome en son konsolu denendi. Bu 'yanlış' verir (https://jsfiddle.net/tusharj/vtp9why4/) – Tushar

1

ile kodunu değiştirmek için deneyin: Varsayılan olarak

<p ng-class="{'red':color==='red','blue':color==='blue'}">This is a paragraph.</p> 

aşağıdaki ifadeyi vardı: Varsayılan renk = null ve değişken mavi ile

color==blue 

tanımlanmamıştır. Yani null == undefined ifadesi doğru döndü, bu nedenle paragrafınız maviydi.

+0

Ama sonra aynı durum kırmızıydı. Öyleyse neden kırmızı değil? – Deadpool

+0

Şunun gibi değiştirmeyi deneyin: 'mavi': renk === 'mavi', 'kırmızı': renk === 'kırmızı' ve kırmızı olacak;) – Fred

+0

Ho ho ... Fred hala soru aynı, neden ilk karşılaştırma ve sadece son ya da ikinci değil! – Deadpool