AngularJS'de CSS stillerini koşullu olarak nasıl uygularım?

Question

Q1. Ana "silme" düğmesine basmadan önce kullanıcının silme için işaret ettiği her "öğenin" görünümünü değiştirmek istediğimi varsayalım. (Bu anlık görsel geri bildirim, atasözü ihtiyacını ortadan kaldırmalıdır "emin misiniz?" Iletişim kutusu.) Kullanıcı, hangi öğelerin silinmesi gerektiğini belirtmek için onay kutularını işaretler. Bir onay kutusu işaretli değilse, bu öğe normal görünümüne geri dönmelidir.

CSS stilini uygulamak veya kaldırmak için en iyi yol nedir?

Q2. Her kullanıcının sitemin nasıl sunulduğunu kişiselleştirmesine izin vermek istediğimi varsayalım. Örneğin, sabit bir yazı tipi boyutu kümesinden birini seçin, kullanıcı tanımlı ön plan ve arka plan renkleri, vb. Izin verin.

Kullanıcı seçme/girişlerini CSS stil uygulamasının uygulamasının en iyi yolu nedir?

Answer 1

Eğik şartlı/dinamik CSS stilinde işlemek için yerleşik bir yönerge sunar:

• ng-class - CSS stilleri kümesi/statik
• ng-style vaktinden bilinen olduğunda kullanmak - stil değerleri dinamik olarak değişebileceği için bir CSS sınıfı tanımlayamadığınızda kullanın. Stil değerlerinin programlanabilir kontrolünü düşünün.
• ng-show ve ng-hide - sürümünde 1.1.5 yeni, eğer daha ayrıntılı ng-switch yerine kullanmak - Eğer sadece göstermek ya da bir şey (değiştirir CSS)
• ng-if gizlemeniz gerekiyorsa kullanmak yalnızca tek bir durum (değiştirir DOM)
• ng-switch için kontrol edilmesi gereken - bunun yerine çok sayıda birbirinden ayrı ng gösterir (değiştirir DOM)
• 0 ile kullanımı ve ng-readonly - sürümünde 1.1.4 yeni, CSS3 geçişleri/animasyonlar

normal "Açısal yol" eklemek için kullanabileceğiniz bir model bağlıyor içerir -

ng-animate form öğesi davranışı kısıtlamak kullanmak Kullanıcı giriş/manipülasyonunu (yani, ng-modelini) kabul edecek ve bu model özelliğini yukarıda bahsedilen yerleşik yönergelerin biriyle ilişkilendirecek bir kullanıcı arabirimine/özellik özelliklerine.

Kullanıcı UI'yi değiştirdiğinde, Açısal sayfadaki ilişkili öğeleri otomatik olarak günceller.

---

Q1, ng sınıfı için iyi bir durum gibi görünüyor - CSS stili bir sınıfta yakalanabilir.

1. boşlukla ayrılmış sınıf isimleri bir dize
2. sınıf isimlerinin bir dizi
3. bir harita:

   ng sınıf aşağıdakilerden birine değerlendirmek gerekir bir "ifadesi" kabul boolean değerler

öğeleri varsayarsak sınıf adları/nesne bazı dizi modeli üzerinde ng-tekrarlamak kullanılarak görüntülenir ve bu zaman onay kutusu için Bir öğe pending-delete sınıfını uygulamak istediğiniz kontrol edilir: - boole değerlerine sınıf isimleri bir harita/nesne

<div ng-repeat="item in items" ng-class="{'pending-delete': item.checked}"> 
    ... HTML to display the item ... 
    <input type="checkbox" ng-model="item.checked"> 
</div> 

Above, biz ng sınıf ifadesi tipi 3. kullandı.

---

Q2 ng stili için iyi bir durum gibi geliyor - CSS stili dinamik, dolayısıyla bunun için bir sınıf tanımlayamıyoruz. Kullanıcıya varsayalım

1. bir harita/CSS CSS stil adları nesne yapmacık Örneğin

değerleri:

ng tarzı için değerlendirmek gerekir bir "ifadesi" kabul arka plan rengi için bir texbox bir renk adı yazabilir (a jQuery renk seçici çok daha güzel olurdu):

<div class="main-body" ng-style="{color: myColor}"> 
    ... 
    <input type="text" ng-model="myColor" placeholder="enter a color name"> 

Yukarıdakilerin her ikisi için

---

Fiddle.

keman da ng göstermek ve ng deri bir örnek içerir. Bir onay kutusu işaretliyse, arka plan rengi pembeye ek olarak, bazı metinler gösterilir. Metin kutusuna 'kırmızı' girilirse, bir div gizlenir.

ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}" 

(Ben, sen Açısal kararsız ng-attr- kullanmak için en son üzerinde olması gerekiyor düşünüyorum: ng sınıfı (SVG'yi stil örneğin) kullanılamaz Bu iyi çalışıyor

Answer 2

Şu anda 1.1.4)

AngularJS + SVG ile çalışma hakkında bir makale yayınladım. Bu konuyu ve sayısız kişiyi konuşuyor. AngularJS v1.2'den itibaren http://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS

Answer 3

.0rc, ng-class ve hatta ng-attr-class

Özellikle, artık bu işin hiçbiri (Hatta sınıf özniteliği içindeki normal bağlanma ile daha önce çalışma yaptı) SVG öğeleri ile başarısız:

ng-class="current==this_element?'active':' ' " 
ng-attr-class="{{current==this_element?'active':' '}}" 
class="class1 class2 .... {{current==this_element?'active':''}}" 

Çözüm olarak, ben kullanılarak

ng-attr-otherAttr="{{current==this_element?'active':''}}" 

ve sonra stil kullanmak ettik

[otherAttr='active'] { 
    ... styles ... 
} 

Answer 4

Tüm tabloya zaten uygulanmış bir sınıfım olduğunda (örneğin, <myClass tbody tr:nth-child(even) td> tek sıralarına uygulanan bir renk), çizelgesi öğelerinin içindeki sınıfları uygularken sorunlarla karşılaştım. Öğeyi, Geliştirici Araçları ile incelediğinizde, element.style'un bir stil atanmamış olduğu anlaşılmaktadır. Yani ng-class kullanmak yerine, ng-style kullanmayı denedim ve bu durumda, yeni CSS özniteliği element.style içinde görünür.

<tr ng-repeat="element in collection"> 

    [...amazing code...] 

    <td ng-style="myvar === 0 && {'background-color': 'red'} || 
        myvar === 1 && {'background-color': 'green'} || 
        myvar === 2 && {'background-color': 'yellow'}">{{ myvar }}</td> 

    [...more amazing code...] 

</tr> 

MyVar ben değerlendiriyorum budur, ve her durumda CSS uyguladığı cari stili üzerine yazar myvar değerine bağlı olarak her <td> bir stil uygulamak: Bu kod benim için büyük işler tüm tablo için sınıf.

GÜNCELLEME

Örneğin tabloya bir sınıf uygulamak isterseniz, bir sayfayı ziyaret veya diğer durumlarda, bu yapıyı ne zaman kullanabileceğini: Temelde

<li ng-class="{ active: isActive('/route_a') || isActive('/route_b')}"> 

, ne Bir ng-class'u aktive etmenin gerekeni, uygulanacak sınıf ve doğru ya da yanlış bir ifadedir. True sınıfı uygular ve yanlış yapmaz. Yani burada biz iki sayfanın rotanın kontrolleri ve aralarındaki bir VEYA var, bu yüzden /route_aYA ise biz aktif sınıf uygulanacak, route_b içindedir.

Bu, yalnızca doğru veya yanlış döndüren sağda bir mantık işlevine sahip çalışır.

Yani ilk örnekte, ng tarzı üç ifadeleri belirleniyordu. Eğer hepsi yanlışsa, herhangi bir stil uygulanmaz, fakat mantığımızı takiben, en azından bir tanesi uygulanacaktır, bu yüzden mantık ifadesi hangi değişken karşılaştırmasının doğru olduğunu ve boş olmayan bir dizinin her zaman doğru olduğunu kontrol edecektir. geri dönüş olarak bir dizi yaptı ve tüm yanıt için VEYA kullanıyorsak, kalan stil uygulanacaktır, tek bir gerçek ile.

$rootScope.isActive = function(viewLocation) { 
    return viewLocation === $location.path(); 
}; 

YENİ GÜNCELLEME

Burada gerçekten yararlı buluyorum şey var: Bu arada

, sana fonksiyon isActive() vermeyi unuttum.

<i class="fa" ng-class="{ 'fa-github' : type === 0, 
          'fa-linkedin' : type === 1, 
          'fa-skype' : type === 2, 
          'fa-google' : type === 3 }"></i> 

: örneğin, bir değişkenin değerine bağlı olarak bir sınıfı uygulamak gerektiğinde, div içeriğine bağlı olarak bir simge, siz (ng-repeat çok yararlı) aşağıdaki kodu kullanabilirsiniz izlemek için Font Awesome

Answer 5

bir şeyden Simgeler olduğunu - CSS stil tire varsa - siz bunları kaldırmak gerekir. Eğer background-color ayarlamak istiyorsanız, doğru yoludur: şartlı şartlı kapsamlı yaratma tarzı

<style scoped type="text/css" ng-if="..."> 

</style> 

Ancak günümüzde sadece FireFox desteklerle stili olduğunu uygulamak

(gelecekte)

ng-style="{backgroundColor:myColor}" 

Answer 6

Bir daha yolu kapsamlı stiller.

Answer 7

Bu çözüm beni

<a ng-style="{true: {paddingLeft: '25px'}, false: {}}[deleteTriggered]">...</a> 

Answer 8

span class="circle circle-{{selectcss(document.Extension)}}"> 

ve kod için hile yaptı

$scope.selectcss = function (data) { 
    if (data == '.pdf') 
     return 'circle circle-pdf'; 
    else 
     return 'circle circle-small'; 
}; 

css

.circle-pdf { 
    width: 24px; 
    height: 24px; 
    font-size: 16px; 
    font-weight: 700; 
    padding-top: 3px; 
    -webkit-border-radius: 12px; 
    -moz-border-radius: 12px; 
    border-radius: 12px; 
    background-image: url(images/pdf_icon32.png); 
} 

Answer 9

aşağıdaki örneğe bakın

<!DOCTYPE html> 
    <html ng-app> 
    <head> 
    <title>Demo Changing CSS Classes Conditionally with Angular</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
    <script src="res/js/controllers.js"></script> 

    <style> 

    .checkboxList { 
     border:1px solid #000; 
     background-color:#fff; 
     color:#000; 
     width:300px; 
     height: 100px; 
     overflow-y: scroll; 
    } 

    .uncheckedClass { 
     background-color:#eeeeee; 
     color:black; 
    } 
    .checkedClass { 
     background-color:#3ab44a; 
     color:white; 
    } 
    </style> 

    </head> 
    <body ng-controller="TeamListCtrl"> 
    <b>Teams</b> 
    <div id="teamCheckboxList" class="checkboxList"> 

    <div class="uncheckedClass" ng-repeat="team in teams" ng-class="{'checkedClass': team.isChecked, 'uncheckedClass': !team.isChecked}"> 

    <label> 
    <input type="checkbox" ng-model="team.isChecked" /> 
    <span>{{team.name}}</span> 
    </label> 
    </div> 
    </div> 
    </body> 
    </html> 

Answer 10

iyi i gerçek veya yanlışdönen bir işlevle controller içerisinde durumunu kontrol etmenizi öneririz.

<div class="week-wrap" ng-class="{today: getTodayForHighLight(todayDate, day.date)}">{{day.date}}</div> 

ve controller içerisinde koşulu

$scope.getTodayForHighLight = function(today, date){ 
    return (today == date); 
    } 

Answer 11

Geçenlerde o bir stil öğesi içindeki bir CSS kuralını değiştirmek için izin verir, çünkü bazı insanlar yararlı bulabileceği keşfedilen bir seçenek daha vardır kontrol - Böylece, ng-stili, ng-sınıfı, ng-show, ng-hide, ng-animate ve diğerleri gibi bir açısal direktifin tekrar tekrar kullanılması ihtiyacını ortadan kaldırır.

Bu seçenek, bir denetleyici tarafından ayarlanan ve "özel stil" olarak adlandırdığım öznitelik yönergesi tarafından izlenen hizmet değişkenleriyle hizmetten yararlanır. Bu strateji çok çeşitli şekillerde kullanılır ve bu fiddle ile bazı genel kılavuzluk teşebbüs edilebilir.

Görünüm:

<tr ng-repeat="element in collection"> 
    [...amazing code...] 
    <td ng-style="{'background-color': getTrColor(element.myvar)}"> 
     {{ element.myvar }} 
    </td> 
    [...more amazing code...] 
</tr> 

Denetleyici:

$scope.getTrColor = function (colorIndex) { 
    switch(colorIndex){ 
     case 0: return 'red'; 
     case 1: return 'green'; 
     default: return 'yellow'; 
    } 
}; 

Answer 12

Başka bir seçenek de, bir ya da iki özelliklerinin basit css stil gerektiğinde.

<div ng-style="myVariable > 100 ? {'color': 'red'} : {'color': 'blue'}"></div>

Answer 13

Sen üçlü ifade kullanabilirsiniz

var app = angular.module('myApp', ['ui.bootstrap']); 
app.service('MainService', function(){ 
    var vm = this; 
}); 
app.controller('MainCtrl', function(MainService){ 
    var vm = this; 
    vm.ms = MainService; 
}); 
app.directive('customStyle', function(MainService){ 
    return { 
     restrict : 'A', 
     link : function(scope, element, attr){ 
      var style = angular.element('<style></style>'); 
      element.append(style); 
      scope.$watch(function(){ return MainService.theme; }, 
       function(){ 
        var css = ''; 
        angular.forEach(MainService.theme, function(selector, key){ 
         angular.forEach(MainService.theme[key], function(val, k){ 
          css += key + ' { '+k+' : '+val+'} '; 
         });       
        }); 
        style.html(css); 
       }, true); 
     } 
    }; 
});