*Hi, guys and gals. Ok, I am having trouble attempting to bind a div layer
inside of a sliding animated menu div after a button click. Ideally, every
button click should show a different div layer with different data after
the animated slide. Here is the code:*
*<!DOCTYPE HTML><html><head> <meta http-equiv="content-type"
content="text/html" /> <meta name="author" content="" />*
* <title>Collapsible Menu</title> <script type="text/javascript"
src="js/angular.min.js"></script> <script type="text/javascript"
src="js/angular-animate.js"></script>*
* <style> .wrap { position:absolute; top:80px; left:0px;
width:100%; } .menu.ng-hide-remove{ animation: open 2s linear;
} @keyframes open { 0% { width:20px; } 50% { width: 560px; }
} .menu { float: right; top:80px; right: 10px;
width:560px; height:400px; background-color:white;
border-color:#0AA7E5; border-style: solid; border-width: 3px;
border-left-width: 20px;*
* border-radius: 6px 6px; font: bold 12px Verdana; color:
red; overflow: none; } .shut { float:
right; top:80px; right: 10px; width:20px; height:400px;
background-color:white; border-color:#0AA7E5; border-style: solid;
border-width: 3px; border-left-width: 20px;*
* border-radius: 6px 6px; font: bold 12px Verdana; color:
red; overflow: none; }*
* .button { width:260px; height:30px;
background-color:white; border-color:#0AA7E5; border-style: solid;
border-width: 3px; border-left-width: 10px; border-right-width:
10px; border-radius: 6px 6px; font: bold 12px Verdana; color:
red; } *
* </style></head>*
*<body ng-app="myApp" ><div class="wrap"><div
style="position:fixed;top:90px;left:0px;width: 400px;height:
450px;background-image: url('images/world2.gif'
);background-repeat:no-repeat;background-size: 100% 100%;"><p></p>*
*<button class="button" ng-mouseover="menu=false" ng-click="menu=!menu">Get
Menu 1</button><br /><br /><button class="button" ng-mouseover="menu=false"
ng-click="menu=!menu">Get Menu 2</button><br /><br /><button class="button"
ng-mouseover="menu=false" ng-click="menu=!menu">Get Menu 3</button><br
/><br /><button class="button" ng-mouseover="menu=false"
ng-click="menu=!menu">Get Menu 4</button><br /><br /><button class="button"
ng-mouseover="menu=false" ng-click="menu=!menu">Get Menu 5</button><br
/><br /><button class="button" ng-mouseover="menu=false"
ng-click="menu=!menu">Get Menu 6</button><br /><br /><button class="button"
ng-mouseover="menu=false" ng-click="menu=!menu">Get Menu
7</button></div> <div class="menu" ng-show="menu" > <div
ng-show="div1">This is menu 1.</div> <div ng-show="div2">This is menu
2.</div> <div ng-show="div3">This is menu 3.</div> <div
ng-show="div4">This is menu 4.</div> <div ng-show="div5">This is menu
5.</div> <div ng-show="div6">This is menu 6.</div> <div
ng-show="div7">This is menu 7.</div> </div> </div> <script> var
app = angular.module('myApp', ['ngAnimate']);
app.controller('divController', function($scope){ $scope.view = 1;
$scope.view = getDiv function(){ If ($scope.view = 1) { $scope.view
= $scope.div1; } If ($scope.view = 2) { $scope.view =
$scope.div2; } If ($scope.view = 3) { $scope.view =
$scope.div3; } If ($scope.view = 4) { $scope.view =
$scope.div4; } If ($scope.view = 5) { $scope.view =
$scope.div5; } If ($scope.view = 6) { $scope.view =
$scope.div6; } If ($scope.view = 7) { $scope.view =
$scope.div7; } else { $scope.view = false;
} } }); </script>*
*</body></html>*
*Perhaps an ng switch directive or ng hide for each button. Please
enlighten me as to the proper syntax to achieve this. *
*Thanks in advance, Batoe.*
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
