Login / Join
Toggle between Menu items in angularJs
submitted on 26/03/2015 by
Codicode
+ infos
Config
Embed
Share
Toggle between Menu items in angularJs
by
Codicode
Toggle between Menu items in angularJs data-ng-repeat
Framework 1 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
Framework 2 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
+ Js file(s) :
//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js
+ Css file(s) :
Apply
Link :
Direct http link :
Fork button :
Html code :
Embed preview :
Copy the following html code to your page to embed the preview,
To include many previews on a single page, just repeat the first line.
You can change the width, height and border color (bcolor).
<div class="refork-widget" code="c23" style="width:100%;height:200px;" bcolor="#ccc"></div>
<script type="text/javascript" src="//snippet.run/d/z.js"></script>
HTML
<div ng-app="app" ng-controller="MainController"> The first title will be the default. <div> <ul> <li data-ng-repeat="Menu in Menus"> <a class="" href="#" ng-click="toggle(Menu)"> {{Menu.id}} </a> </li> </ul> </div> <div data-ng-repeat="Menu in Menus" ng-show="Menu.id==(activeMenu || 1)"> <h2> {{Menu.id}}- {{Menu.title}} </h2> </div> </div>
CSS
body{ background-color:#fff; margin:20px; text-align:center; }
Javascript
angular.module('app', []). controller('MainController', ['$scope', function ($scope) { $scope.Menus = [{ id: 1, title: "This is first DIV !!!", }, { id: 2, title: "This is second DIV !!!", }, { id: 3, title: "This is third DIV !!!", }]; $scope.toggle = function (Menu) { $scope.activeMenu = Menu.id; }; }]);
©2013 Copyright snippet.run
Privacy
-
Terms of use
-
About
-
Contact