Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app='test'>
<head>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<meta charset=utf-8 />
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
    <script src="http://code.angularjs.org/1.2.9/angular-animate.min.js"></script>
<title>JS Bin</title>
</head>
<body>
  <div ng-controller='dashboard'>
    <!-- MENU -->
    <input type='checkbox' ng-click='showSection("users")' ng-checked='visible("users")'  id="showUsers" />
    <label for='showUsers'>Users Menu</label>
    <br />
    <input type='checkbox' ng-click='showSection("classes")' ng-checked='visible("classes")' id='showClasses' />
    <label for="showClasses">Classes Menu</label>
    <!-- END MENU-->
    <!-- SECTIONS -->
    <div class='section' ng-order='orderOf("users")' ng-show='visible("users")' ng-controller='usersviewer'>
      <legend>Users</legend>
      <li ng-repeat='user in users'>{{user.name}}</li>
    </div>
    <div class='section' ng-order='orderOf("users")' ng-show='visible("classes")' ng-controller='classesviewer'>
      <legend>Classes</legend>
      <li ng-repeat="class in classes">{{class}}</li>    
    </div>
    <!-- END SECTIONS -->
  </div>
  
</body>
</html>
 
.section {
  background:darkgray;
  color:white;
  
  /* Default fully visible value */
  opacity: 1;
  height: 100px;
  overflow:hidden;
}
.section.ng-hide-add {
  /* Declare transitions */
  display:block !important;
  transition: all 0.2s;
  
  /* Value when fully visible */
  opacity: 1;
  height: 100px;
}
.section.ng-hide-add-active {
  /* Value when invisible */
  opacity: 0;
  height: 0px;
}
​
.section.ng-hide-remove {
  /* Declare transitions */
  transition: all 0.2s;
  display:block !important;
  
  /* Value when invisible */
  opacity: 0;
  height:0px;
}
.section.ng-hide-remove-active {
  /* Value when fully visible */
  opacity: 1;
  height: 100px;
}
​
 
function usersviewer($scope){
  $scope.users = [
    {name: 'Bob'},
    {name: 'Sally'},
    {name: 'Roger'}
  ];
}
function classesviewer($scope){
 $scope.classes = [
   'History',
   'English',
   'Math'
 ]; 
}
function dashboard($scope){
 $scope.showUsers = true;
 $scope.showClasses = false;
  
  $scope.openSections = [];
  
  $scope.orderOf = function(section){
    if($scope.openSections.indexOf(section)>=0){
     return $scope.openSections.indexOf(section); 
    }
  }
  
  $scope.showSection = function(section){
    if($scope.openSections.indexOf(section) >= 0){
     $scope.openSections.splice( $scope.openSections.indexOf(section),1);
    } else {
      $scope.openSections.unshift(section);
    }
  }
  
  $scope.visible = function(section){
    if($scope.openSections.indexOf(section) >= 0){
      return true;
    } else {
       return false; 
    }
  }
}
angular.module('test',['ngAnimate']
).directive('section', function(){
  function link(scope, el){
    el.on("DOMAttrModified", function(e){
      console.log(e.originalEvent.attrName + ': ' + e.originalEvent.newValue);
    });
    el.click(function(){
      console.log('click');
    });
  }
  return {
    link: link,
    restrict: 'C'
  };
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
prodiklpro
0viewers