AngularJS içinde boolean True/False gibi iki dize değeri arasında nasıl geçiş yapılır?

Question

Bir tuşum var, üzerine tıklayarak bazı alanları göster/gizle. İstediğim

button(ng-click="areaStatus='on'") 
.area(ng-class="areaStatus") 

sadece ng-show/ng-hide kullanmak ve sonra Boole areaStatus atamak, ama açık/kapalı gibi daha karmaşık şeyler istememek// ne olursa olsun/şeffaf gizli.

Bir satır içi ifadeyle, bunun için bir işlev yazmak zorunda kalmadan, "açık" ile "kapalı" arasında alanStatus arasında geçiş yapmak için bir yol var mı?

Answer 1

Bunu (HTML) yapabilirsiniz. Durumu değiştirmek için, özellikle de iki değeri değiştirmekten daha karmaşıksa, kesinlikle bir yöntem yaratacağım.

Ancak, areaStatus sadece alan sınıfını değiştirmekse, onu düşürmeniz gerektiğini düşünüyorum ve bunun yerine sınıfınızı model durumunuza göre değiştirin. Böyle bir şey:

function Ctrl($scope) { 
    $scope.state = 'on'; 

    $scope.changeState = function() { 
     $scope.state = $scope.state === 'on' ? 'off' : 'on'; 
    } 
} 

... 

<area ng-class="{'on': state, 'off': !state }"> 

Ben 'üzerinde' kullanılmış ve 'kapalı', ama bu sizin modeline mantıklı değerler olmalıdır ettik.

Answer 2

Size isteyen konum ya da bir işlev isteyen kaçınarak neden, ama seni bildiğini yapmak konusunda gider bir yol ne yapmak istediğinizi çok net değil:

İşte

<button ng-click="areaStatus = !areaStatus">Toggle</button> 
<div ng-class="{'red' : areaStatus, 'green' : !areaStatus}"> 
    This is some text 
</div> 

bir olduğunu fiddle that shows it as well ve aşağıdaki kod snippet'i. İçinde

var myModule = angular.module('myModule', []); 
 

 
myModule.controller('myController', function ($scope) { 
 

 
    $scope.areaStatus = false; 
 
});

.red { 
 
    color:red; 
 
} 
 
.green { 
 
    color:green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> 
 
<div ng-app="myModule"> 
 
    <div ng-controller="myController"> 
 
     <button ng-click="areaStatus = !areaStatus">Toggle</button> 
 
     <div ng-class="{'red' : areaStatus, 'green' : !areaStatus}"> 
 
      This is some text 
 
     </div> 
 
    </div> 
 
</div>

ng-click sadece basitçe areaStatus ait boolean değerini çevirin. ng-class ile bir nesneyi iletebilirsiniz. red ve green, uygulamak istediğiniz sınıflar olacaktır. Aşağıdaki ifade doğru olduğunda uygulanacaktır.

alternatif başka bir sınıf içinde Açısal en {{ }} kullanmak olacaktır: areaStatus dize "hidden" içeriyorsa

<div class="{{areaStatus}}"> </div> 

Yani, o orada ne olacağını sınıftır. Ancak, areaStatus değerini (bir işlevde, birden çok düğmede veya onay kutusunda) değiştirmek için hala bir yol gerekir.

<button ng-click="value = { 'on': 'off', 'off':'on'}[value]">On/Off</button> 

jsFiddle

Ama çok çirkin: