Question

我正在使用angular进行作业门户项目，我希望动态更改页面布局。我有以下菜单＆＃34;所有，ID，A和FD＆＃34; （菜单是动态的，用户可以从后端添加更多菜单）如果我点击＆＃34; ID＆＃34;然后我希望页面布局颜色应该是＆＃34;橙色＆＃34;，如果我点击＆＃34; A＆＃34;那么我希望页面布局颜色应该是＆＃34;蓝色＆＃34; ，如果我点击＆＃34; FD＆＃34;然后我希望页面布局颜色应该是＆＃34;红色＆＃34;如果进一步的用户可以添加新菜单，这些布局应该以相同的模式重复。

提前谢谢

Answer 1

您可以使用ng-style之类的内容

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>

如何动态更改页面布局

1 个答案: