Skip to content

Instantly share code, notes, and snippets.

@mritzco

mritzco/README.md

Last active August 29, 2015 13:56
Show Gist options
  • Save mritzco/9066154 to your computer and use it in GitHub Desktop.
Save mritzco/9066154 to your computer and use it in GitHub Desktop.
Download ZIP
Angular JS. Control screen sections visibility via the app model
Raw
README.md
Raw
app.js
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')
}
});
}
}
});
Raw
index.html
<!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="[email protected]" 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>
Raw
style.css
/* 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