After the user selects options from a form, I am trying to update my CSS using the settings received from an object. However, I am unsure of how to implement this layout change.
Here is a glimpse of my template:
div class="btn btn-primary" ng-click="showMenu()">Layout Settings</div>
<div ng-show="themeSelected">
<form>
<div class="row">
...
</div>
</form>
<button class="btn btn-primary" ng-click="saveChanges(selectedLayout)">Save</button>
<button class="btn btn-primary" ng-click="cancel()">Cancel</button>
<div style="color: red" ng-show="errors.length > 0">{{errors}}</div>
</div>
Upon clicking the Save button, all the defined values are stored in an object. The next step involves using these settings to make real-time changes to the layout.
Below is my controller where the saveChanges function is defined:
'use strict';
(function () {
angular.module('routerApp').controller('LayoutController', function ($scope, layoutRepository) {
$scope.showMenu = function() {
$scope.themeSelected = true;
};
$scope.cancel = function() {
$scope.themeSelected = false;
};
$scope.saveChanges = function (selectedLayout) {
layoutRepository.saveLayoutInfo(selectedLayout);
$scope.themeSelected = false;
};
$scope.selectedLayout = {};
window.model = $scope.selectedLayout;
});
}());
This snippet represents the layoutRepository:
'use strict';
(function () {
angular.module('routerApp').factory('layoutRepository', function ($http) {
return {
saveLayoutInfo: function (selectedLayout) {
console.log(selectedLayout);
$http({
method: "POST",
url: "/api/LayoutSettings",
data: selectedLayout,
cache: false
});
}
};
});
}());