Wie das Seitenlayout ändern dynamisch

Question

Ich arbeite an Job-Portal-Projekt mit Winkel, in dem ich wollte dynamisch das Seitenlayout ändern. ich habe folgende Menüs „alle, ID, A und FD“ (Menüs sind dynamisch, Benutzer kann mehrere Menüs aus dem Backend-add), wenn ich auf „ID“ klicken dann möchte ich das Seitenlayout Farbe sollte „orange“, wenn i Klicken Sie auf "A", dann möchte ich die Seitenlayoutfarbe sollte "blau" sein, und wenn ich auf "FD" dann möchte ich die Seitenlayout Farbe sollte "rot", wenn weitere Benutzer das neue Menü hinzufügen können diese Layout sein sollte wiederhole das gleiche Muster.

Vielen Dank im Voraus

Answer 1

Sie ng-style so etwas wie

var myApp = angular.module('myApp',[]); 
 
myApp.controller('MyCtrl',function($scope, $timeout) { 
 
$scope.items=[{ name:'all',color:'none'},{ name:'ID',color:'orange'},{ name:'A',color:'blue'},{ name:'FD',color:'red'}] 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
<div ng-controller="MyCtrl" ng-style="{ 'background-color': selected.color }"> 
 
<select ng-options="item as item.name for item in items " ng-model="selected"></select> 
 

 
</div> 
 
</div>