kzen.dev
  • Vprašanja
  • Oznake
  • Uporabniki
Obvestila
Nagrade
Registracija
Once you register, you will be notified of replies and comments to your questions.
Prijavite se
Če že imate račun, se prijavite in preverite nova obvestila.
Za dodana vprašanja, odgovore in komentarje boste prejeli nagrade.
Več
Vir:
Uredi
 respectTheCode
respectTheCode
Question

Kakšen je najboljši način za pogojno uporabo razreda?

Recimo, da imate polje, ki je prikazano v obliki ul z li za vsak element, in lastnost kontrolerja, imenovano selectedIndex. Kakšen bi bil najboljši način za dodajanje razreda v li z indeksom selectedIndex v AngularJS?

Trenutno podvajam (ročno) kodo li in dodajam razred eni od oznak li ter uporabljam ng-show in ng-hide za prikaz samo enega li na indeks.

1170 2011-10-17T10:49:52+00:00 3
Damjan Pavlica
Damjan Pavlica
Edited question Ndopoldan 46p28.7.20151tni 46trdopoldanni julij 2015 в 10:01
Programiranje
css
angularjs
Popular videos
The Great Gildersleeve: Gildy's New Car / Leroy Has the Flu / Gildy Needs a Hobby
The Great Gildersleeve: Gildy's New Car / Leroy Has the Flu / Gildy Needs a Hobby
pred 10 leti
Section, Week 5
Section, Week 5
pred 7 leti
iOS App Development with Swift by Dan Armendariz
iOS App Development with Swift by Dan Armendariz
pred 6 leti
Calling All Cars: Hit and Run Driver / Trial by Talkie / Double Cross
Calling All Cars: Hit and Run Driver / Trial by Talkie / Double Cross
pred 10 leti
GLAGOL 2. del: razlaga NA IZI
GLAGOL 2. del: razlaga NA IZI
pred 2 leti
Glagolski naklon na izi
Glagolski naklon na izi
pred 2 leti
The Great Gildersleeve: Marshall Bullard's Party / Labor Day at Grass Lake / Leroy's New Teacher
The Great Gildersleeve: Marshall Bullard's Party / Labor Day at Grass Lake / Leroy's New Teacher
pred 10 leti
Supersection Week 1
Supersection Week 1
pred 7 leti
Calling All Cars: Desperate Choices / Perfumed Cigarette Lighter / Man Overboard
Calling All Cars: Desperate Choices / Perfumed Cigarette Lighter / Man Overboard
pred 10 leti
Ron Paul & Sasha Baron Cohen (Bruno)
Ron Paul & Sasha Baron Cohen (Bruno)
pred 13 leti
Calling All Cars: The Wicked Flea / The Squealing Rat / 26th Wife / The Teardrop Charm
Calling All Cars: The Wicked Flea / The Squealing Rat / 26th Wife / The Teardrop Charm
pred 10 leti
Calling All Cars: Curiosity Killed a Cat / Death Is Box Office / Dr. Nitro
Calling All Cars: Curiosity Killed a Cat / Death Is Box Office / Dr. Nitro
pred 10 leti
Calling All Cars: Missing Messenger / Body, Body, Who's Got the Body / All That Glitters
Calling All Cars: Missing Messenger / Body, Body, Who's Got the Body / All That Glitters
pred 10 leti
Calling All Cars: Don't Get Chummy with a Watchman / A Cup of Coffee / Moving Picture Murder
Calling All Cars: Don't Get Chummy with a Watchman / A Cup of Coffee / Moving Picture Murder
pred 10 leti
The Great Gildersleeve: Audition Program / Arrives in Summerfield / Marjorie's Cake
The Great Gildersleeve: Audition Program / Arrives in Summerfield / Marjorie's Cake
pred 10 leti
« Prejšnji
Naslednji »
This question has 1 odgovor in English, to read them log in to your account.
Solution / Answer
 orcun
orcun
Ndopoldan 36p29.11.20111tni 36trdopoldanni november 2011 в 11:17
2011-11-29T11:17:36+00:00
Več
Vir:
Uredi
#13609531

Če ne želite vnesti imen razredov CSS v kontroler, kot to počnem jaz, je tu star trik, ki ga uporabljam že od časov pred 1. Napišemo lahko izraz, ki se ovrednoti neposredno z imenom razreda izbrano, ne potrebujemo nobenih direktiv po meri:

ng:class="{true:'selected', false:''}[$index==selectedIndex]"

Upoštevajte staro sintakso s podpičjem.

Na voljo je tudi nov, boljši način pogojne uporabe razredov, kot npr:

ng-class="{selected: $index==selectedIndex}"

Angular zdaj podpira izraze, ki vračajo objekt. Vsaka lastnost (ime) tega predmeta se zdaj obravnava kot ime razreda in se uporabi glede na njegovo vrednost.

Vendar pa ta načina nista funkcionalno enaka. Tukaj je primer:

ng-class="{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]"

Zato bi lahko ponovno uporabili obstoječe razrede CSS tako, da bi lastnost modela preslikali v ime razreda, hkrati pa razredov CSS ne bi vključili v kodo krmilnika.

 orcun
orcun
Edited answer Npopoldan 1p6.1.20174tni 1trpopoldanni januar 2017 в 1:44
1381
0
Anonimni uporabnik
Npopoldan 58p17.10.20110tni 58trpopoldanni oktober 2011 в 1:55
2011-10-17T13:55:58+00:00
Več
Vir:
Uredi
#13609530

Tukaj je veliko preprostejša rešitev:

function MyControl($scope){
    $scope.values = ["a","b","c","d","e","f"];
    $scope.selectedIndex = -1;

    $scope.toggleSelect = function(ind){
        if( ind === $scope.selectedIndex ){
            $scope.selectedIndex = -1;
        } else{
            $scope.selectedIndex = ind;
        }
    }

    $scope.getClass = function(ind){
        if( ind === $scope.selectedIndex ){
            return "selected";
        } else{
            return "";
        }
    }

    $scope.getButtonLabel = function(ind){
        if( ind === $scope.selectedIndex ){
            return "Deselect";
        } else{
            return "Select";
        }
    }
}
.selected {
    color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app ng-controller="MyControl">
    <ul>
        <li ng-class="getClass($index)" ng-repeat="value in values" >{{value}} <button ng-click="toggleSelect($index)">{{getButtonLabel($index)}}</button></li>
    </ul>
    <p>Selected: {{selectedIndex}}</p>
</div>
46
0
L&#232;se majest&#233;
Lèse majesté
Ndopoldan 47p26.7.20123tni 47trdopoldanni julij 2012 в 7:53
2012-07-26T07:53:47+00:00
Več
Vir:
Uredi
#13609532

Pred kratkim sem se soočil s podobno težavo in se odločil, da ustvarim pogojni filter:

  angular.module('myFilters', []).
    /**
     * "if" filter
     * Simple filter useful for conditionally applying CSS classes and decouple
     * view from controller 
     */
    filter('if', function() {
      return function(input, value) {
        if (typeof(input) === 'string') {
          input = [input, ''];
        }
        return value? input[0] : input[1];
      };
    });

Sprejema en sam argument, ki je bodisi polje z dvema elementoma bodisi niz, ki se spremeni v polje, ki mu je kot drugi element dodan prazen niz:

<li ng-repeat="item in products | filter:search | orderBy:orderProp |
  page:pageNum:pageLength" ng-class="'opened'|if:isOpen(item)">
  ...
</li>
26
0
Dodajte vprašanje
Kategorije
Vse
Tehnologija
Kultura / Rekreacija
Življenje / umetnost
Znanost
Strokovno
Poslovni
Uporabniki
Vse
New
Popular
1
Mansur Zakirov
Registered pred 1 dnem
2
Тагир Мамедов
Registered pred 3 dnevi
3
Алексей Толманов
Registered pred 3 dnevi
4
Valeriu Vodnicear
Registered pred 1 tednom
5
Alex Johnson
Registered pred 2 tednoma
DE
EL
ES
FI
FR
ID
IT
JA
KO
NL
PT
SL
TR
UK
ZH
© kzen.dev 2023
Vir:
stackoverflow.com
na podlagi licence cc by-sa 3.0 z navedbo avtorstva