This sample shows how to keep a top level model that states what blocks/ panels to display on the screen.
There are 2 different samples:
- Using directives for each panel
- Using ng-show
http://plnkr.co/edit/d0Dq94?p=preview
Last active
August 29, 2015 13:56
-
-
Save mritzco/9066154 to your computer and use it in GitHub Desktop.
Angular JS. Control screen sections visibility via the app model
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var app = angular.module('myApp', []); | |
| app.controller('MainCtrl', function ($scope) { | |
| $scope.windows = { top: true, left:false, center:true, right: true}; | |
| $scope.toggleall = function(state){ | |
| $scope.windows.top = state; | |
| $scope.windows.left = state; | |
| $scope.windows.center = state; | |
| $scope.windows.right = state; | |
| } | |
| }); | |
| app.directive('toggler', function() { | |
| var tpl ='<button ng-click="toggle()" ng-transclude></button>'; | |
| return { | |
| restrict: "A", | |
| template: tpl, | |
| transclude: true, | |
| replace: true, | |
| scope: { | |
| isVisible: '=toggler' | |
| }, | |
| controller: function ($scope) { | |
| $scope.toggle = function() { | |
| $scope.isVisible = !$scope.isVisible; | |
| } | |
| } | |
| } | |
| }); | |
| app.directive('viewpanel', function() { | |
| return { | |
| restrict: "A", | |
| scope: { | |
| isVisible: '=viewpanel' | |
| }, | |
| link: function (scope, el, attrs) { | |
| scope.$watch('isVisible', function (value, oldvalue) { | |
| if (value) { | |
| el.removeClass('hidden'); | |
| } else { | |
| el.addClass('hidden') | |
| } | |
| }); | |
| } | |
| } | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>AngularJS Plunker</title> | |
| <script> | |
| document.write('<base href="' + document.location + '" />'); | |
| </script> | |
| <link rel="stylesheet" href="style.css" /> | |
| <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.12/angular.js" data-semver="1.2.12"></script> | |
| <script src="app.js"></script> | |
| </head> | |
| <body ng-app="myApp" ng-controller="MainCtrl"> | |
| <h3>Panels getting toggled via the model (Showing status)</h3> | |
| <div toggler="windows.top" ng-class="{active: !windows.top}">top</div> | |
| <div toggler="windows.left" ng-class="{active: !windows.left}">left</div> | |
| <div toggler="windows.center" ng-class="{active: !windows.center}">center</div> | |
| <div toggler="windows.right" ng-class="{active: !windows.right}">right</div> | |
| <button ng-click="toggleall(false)">Hide All</button> | |
| <button ng-click="toggleall(true)">Show All</button> | |
| <hr /> | |
| <h4>Using a custom directive to change state (shown in red instead of hiding)</h4> | |
| <div viewpanel="windows.top">Top</div> | |
| <div viewpanel="windows.left">left</div> | |
| <div viewpanel="windows.center">center</div> | |
| <div viewpanel="windows.right">right</div> | |
| <h4>Same model property but using ng-show</h4> | |
| <hr /> | |
| <div ng-show="windows.top">top</div> | |
| <div ng-show="windows.left">left</div> | |
| <div ng-show="windows.center">center</div> | |
| <div ng-show="windows.right">right</div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Put your css in here */ | |
| body { | |
| font-family: Arial; | |
| font-size:12px; | |
| } | |
| .active { | |
| opacity: .6; | |
| } | |
| .hidden { | |
| opacity: .3; | |
| } | |
| div { | |
| display: block; | |
| float: left; | |
| margin: 10px 2px; | |
| border: 1px solid #ccc; | |
| padding: 28px; | |
| height: 53px; | |
| -webkit-transition: all 1s ease-in-out; | |
| -moz-transition: all 1s ease-in-out; | |
| -o-transition: all 1s ease-in-out; | |
| transition: all 1s ease-in-out; | |
| } | |
| h4 { | |
| display:block; | |
| float:none; | |
| clear:both; | |
| font-size:10px; | |
| color:#555; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment