Bir ifade aracılığıyla ng sınıfı uygularken dizeleri ve değişkenleri doğru şekilde birleştirmek nasıl?

Question

Uygulamam başlatıldığında, aşağıdaki uygulama ng-class beklendiği gibi çalışıyor ve sınıf adı doğru şekilde uygulanıyor. Ancak, çalışma süresi boyunca person.status değeri değiştiğinde, sınıf aynı kalır.

İşte benim kod:

ng-class="{ 'avatar--{{ person.status }}' : myBool }" 

nasıl person.status değeri değiştiğinde, yani benim sınıf yaptığında böylece formatını değiştirebilir?

Örnek: Uygulama başlatır person.statusonline olarak ayarlanmışsa, uygulanan sınıf avatar--online olup. Ancak, geçerli oturumda durumları offline olarak değişirse, sınıf avatar--online kalır.

Answer 1

ng sınıfının sınıf adı bölümünde açısal bir ifade kullanmayı denemedim. ancak temelde size ng sınıf uygulamasında iki koşul ayarlayabilirsiniz Bu uygulama

ng-class="{'avatar--online': person.status == 'online', 
      'avatar--offline': person.status == 'offline'}" 

ile istediğinizi elde edebiliriz.

Bu yardımcı olur umarım. Eğer 'myBool' kullanarak etrafında bir yol bulabilirsek

Answer 2

, şunu deneyin:

ng-class="'avatar--' + person.status" 

Çalışma kod parçacığını: Birkaç durumları durumunda

var app = angular.module('myapp', []); 
 
app.controller('mycontroller', function($scope) { 
 
    $scope.colors = ['blue', 'green']; 
 
    $scope.color = $scope.colors[0]; 
 

 

 
});

.mydiv { 
 
    width: 200px; 
 
    height: 50px; 
 
    background-color: grey; 
 
} 
 
.prefix--blue { 
 
    background-color: blue; 
 
} 
 
.prefix--green { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myapp" ng-controller="mycontroller"> 
 
    <select ng-model="color" ng-options="c for c in colors"></select> 
 
    <div class="mydiv" ng-class="'prefix--'+color"></div> 
 
</div>