I am creating dynamic menu using ng-repeat in angular
my static code before using ng-repeat(with static content) is as below(which works perfectly fine. when we click honeymoon packages it opens child menu with options)
<nav class="cd-nav">
<ul id="cd-primary-nav" class="cd-primary-nav is-fixed">
<li class="has-children">
Honeymoon Packages
<ul class="cd-secondary-nav is-hidden">
<li class="go-back">Menu</li>
<li class="has-children">
Domestic Tour
<ul class="is-hidden">
<li class="go-back">Domestic Tour</li>
<li class="see-all">All Accessories</li>
<li>Goa </li>
<li>Shimla</li>
<li>Jammu & Kashmir</li>
<li>Himachal</li>
<li>Malvan</li>
<li>Bangal</li>
</ul>
</li>
<li class="has-children">
Bottoms
<ul class="is-hidden">
<li class="go-back">Clothing</li>
<li class="see-all">All Bottoms</li>
<li>Casual Trousers</li>
<li>Leggings</li>
<li>Shorts</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
after using ng-repeat the code is as follows
<nav class="cd-nav">
<ul id="cd-primary-nav" class="cd-primary-nav is-fixed">
<li class="has-children" ng-repeat="category in listCategory">
{{category.Name}}
<ul class="cd-secondary-nav is-hidden">
<li class="go-back">Menu</li>
<li class="has-children">
Domestic Tour
<ul class="is-hidden">
<li class="go-back">Domestic Tour</li>
<li class="see-all">All Accessories</li>
<li>Goa </li>
<li>Shimla</li>
<li>Jammu & Kashmir</li>
<li>Himachal</li>
<li>Malvan</li>
<li>Bangal</li>
</ul>
</li>
<li class="has-children">
Bottoms
<ul class="is-hidden">
<li class="go-back">Clothing</li>
<li class="see-all">All Bottoms</li>
<li>Casual Trousers</li>
<li>Leggings</li>
<li>Shorts</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
-[without ng-repeat]
-[with ng-repeat not able to click and open submenu]
but the sublist menu is not showing up after binding dynamic data using ng-repeat can anybody please guid me what i am doing wrong?
check weather your listCategory in your controller is binding correctly.
I added solution to codepen
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.listCategory = [
{"Name" : "Honeymoon Packages" },
{"Name" : "Honeymoon Packages2"},
{"Name" : "Honeymoon Packages3"},
{"Name" : "Honeymoon Packages4"},
{"Name" : "Honeymoon Packages5"},
{"Name" : "Honeymoon Packages6"},
{"Name" : "Honeymoon Packages7"}
];
});
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!---BOOTSRAP JS AND CSS-------->
<script src="jquery-2.1.1.js" type="text/javascript"></script>
<link href="bootstrap.min.css" rel="stylesheet" />
<script src="bootstrap.min.js" type="text/javascript"></script>
<!-- added angularjs -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!---MEGA MENU---->
<link rel="stylesheet" href="mega-menu.css">
<!-- Resource style -->
<script src="modernizr.js"></script>
<!-- Modernizr -->
<!-----MEGA MENU SCRIPT------>
<script src="jquery.mobile.custom.min.js"></script>
<script src="main.js"></script>
<!-- added app.js -->
<script src="app.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<!---Navigation---->
<header class="cd-main-header">
<a class="cd-logo" href="#0"><img src="images/logo.png" alt="Logo"></a>
<ul class="cd-header-buttons">
<li><a class="cd-nav-trigger" href="#cd-primary-nav"><span></span></a></li>
</ul>
<!-- cd-header-buttons -->
</header>
<nav class="cd-nav">
<ul id="cd-primary-nav" class="cd-primary-nav is-fixed">
<li class="has-children" ng-repeat="category in listCategory">
{{category.Name}}
<ul class="cd-secondary-nav is-hidden">
<li class="go-back">Menu</li>
<li class="has-children">
Domestic Tour
<ul class="is-hidden">
<li class="go-back">Domestic Tour</li>
<li class="see-all">All Accessories</li>
<li>Goa </li>
<li>Shimla</li>
<li>Jammu & Kashmir</li>
<li>Himachal</li>
<li>Malvan</li>
<li>Bangal</li>
</ul>
</li>
<li class="has-children">
Bottoms
<ul class="is-hidden">
<li class="go-back">Clothing</li>
<li class="see-all">All Bottoms</li>
<li>Casual Trousers</li>
<li>Leggings</li>
<li>Shorts</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<!-- cd-nav -->
<main class="cd-main-content">
<div class="clearfix"></div>
</main>
</body>
</html>
As I am able to see that you have given id="mainCat" to your main menu and I think you know that id is unique in the view. So it will not click at all. Please try to give a unique id to all your tabs. You can use $index to do so.
id="mainCat{{$index}}"
it will create a unique id. Hope this may help.
Related
I am new to angularjs,i am working on angularjs Routing using ngRoute.
MasterPage.HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Styles/css/bootstrap.min.css" rel="stylesheet" />
<script src="Script/JS/jquery-3.1.0.min.js"></script>
<script src="Script/JS/bootstrap.min.js"></script>
<script src="Script/Angular/angular.min.js"></script>
<script src="Script/Angular/angular-route.min.js"></script>
<script src="Js/app.js"></script>
</head>
<body ng-app="angualarModule">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" style="text-indent: 3em" href="#">
Dairy Management
</a>
<ul class="nav">
<li class="active">Home</li>
<li>Product Master</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Customer Master
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Customer Master</li>
<li class="divider"></li>
<li>Customer Rate Master</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Distributer Master
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Distributer Master</li>
<li class="divider"></li>
<li>Distributer Rate Master</li>
</ul>
</li>
</ul>
<a class="btn" href="#" style="float:right;">
Logout
</a>
</div>
</div>
</div>
<div ng-view></div>
</body>
</html>
app.js
var angualarModule = angular.module("angualarModule", ['ngRoute']);
angualarModule.config(function ($routeProvider) {
$routeProvider.
when('/Product', {
templateUrl: 'Templates/ProductMaster.html'
});
});
ProductMaster.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../Script/JS/jquery-3.1.0.min.js"></script>
<script src="../Script/Angular/angular.min.js"></script>
<script src="../Js/app.js"></script>
<script type="text/javascript">
$(document).ready(function () {
alert('HI');
});
</script>
</head>
<body ng-app="angualarModule">
<h1>Product Master</h1>
</body>
</html>
When i click on ProductMaster link the page is not displayed in ng-view.
There are no errors in console.
In fact alert('HI') is also getting called which is present in ProductMaster.html page.
But ng-view does not display the required page.
Thanks......
The code inside ProductMaster.html is unnecessary, except <h1>Product Master</h1>.
ProductMaster template is just a part of your already included MasterPage.html, and hence having inside another would be redundant.
So, your MasterPage.html should only contain <h1>Product Master</h1>, not the complete html. And it should work. [Supporting Plunk - http://plnkr.co/edit/hvle5ceu9n4cOVPugbdm?p=preview]
Also, make sure if you're using Bootstrap's JS, your jQ version should be less than 3.
ProductMaster.html should be only html (not entire page):
<h1>Product Master</h1>
And to call your JS code use a controller in a route object like it described here $routeProvider
$routeProvider.
when('/Product', {
templateUrl: 'Templates/ProductMaster.html',
controller: 'ProductMasterController', <-- this for JS code
});
Try to change these two lines:
<script src="Script/Angular/angular.min.js"></script>
<script src="Script/Angular/angular-route.min.js"></script>
with these
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-route.min.js"></script>
If the routing works, your scripts are missing from Script/Angular/.
And don't use the full html page structure (like body and head tags) in partials.
var angualarModule = angular.module("angualarModule", ['ngRoute']);
angualarModule.config(function ($routeProvider) {
$routeProvider.
when('/Product', {
template: 'ProductMaster.html'
})
.otherwise({
redirectTo: '/form'
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Styles/css/bootstrap.min.css" rel="stylesheet" />
<script src="Script/JS/jquery-3.1.0.min.js"></script>
<script src="Script/JS/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="angualarModule">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" style="text-indent: 3em" href="#">
Dairy Management
</a>
<ul class="nav">
<li class="active">Home</li>
<li>Product Master</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Customer Master
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Customer Master</li>
<li class="divider"></li>
<li>Customer Rate Master</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Distributer Master
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Distributer Master</li>
<li class="divider"></li>
<li>Distributer Rate Master</li>
</ul>
</li>
</ul>
<a class="btn" href="#" style="float:right;">
Logout
</a>
</div>
</div>
</div>
<div ng-view></div>
</body>
</html>
I trying to show button if isNotRegistered == true and hide nested links. And if it's false hide the button and show links.
Why do in my plunker all links hide?
http://plnkr.co/edit/XpwWyYKpbeUASUJpnDa0?p=preview
I assume the names would turn into links... Check this out... Kindly correct me if i misinterpreted it.
angular.module("App", [])
.controller("Ctrl", function($scope){
$scope.list = [
{item: '1',
isNotRegistered: false,
children: [
{name: '11'},
{name: '12'}
]
},
{item: '2',
isNotRegistered: true,
children: [
{name: '21'},
{name: '22'}
]
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App" ng-controller="Ctrl">
<ul>
<li ng-repeat="item in list">{{item.item}}
<ul>
<li ng-if="item.isNotRegistered" ng-repeat="child in item.children">{{child.name}}</li>
<button ng-if="!item.isNotRegistered">Click</button>
</ul>
</li>
</ul>
</div>
replace this
<li ng-repeat="item in list">{{item.item}}
<ul>
<li ng-if="!item.isNotRegistered" ng-repeat="item in item.children">{{item.name}}</li>
<button ng-if="item.isNotRegistered">Click</button>
</ul>
</li>
from this
<li ng-repeat="item in list">{{item.item}}
<ul>
<li ng-if="!item.isNotRegistered" ng-repeat="newItems in item.children">{{newItems.name}}</li>
<button ng-if="item.isNotRegistered">Click</button>
</ul>
</li>
the problem was previously for both ng repeat you assign value to item. so there was a confusion
Use ng-show instead and avoid using same variable name at different levels. I have changes the first li item as Pitem. Below is the working for you.
All the best
<!DOCTYPE html>
<html ng-app="App">
<head>
<script data-require="angularjs#1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="Ctrl">
<ul>
<li ng-repeat="Pitem in list">{{Pitem.item}}
<ul>
<li ng-show="!Pitem.isNotRegistered" ng-repeat="item in Pitem.children">{{item.name}}</li>
<button ng-show="Pitem.isNotRegistered">Click</button>
</ul>
</li>
</ul>
</body>
</html>
Please mark as answer if this solves your question
Pls can some help with this. View the website i'm working on on the mobile phone i observed the menu is showing without clicking the menu icon and covering my content. What can i do do solve this. Here is my code. I'm working with foundation 5
<!-- tab bar navigation -->
<nav class="tab-bar hide-for-medium-up">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon"><span></span></a>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li>Home</li>
<li>About</li>
<li>Store</li>
<li>Our Clients</li>
<li>Contact</li>
</ul>
</aside>
<a class="exit-off-canvas"></a>
Thanks
Here is your answer....
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.css">
<div class="large-12 columns">
<nav class="top-bar" data-topbar="" role="navigation">
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right show-for-large-up">
<li class="active">Right Button Active</li>
<li class="has-dropdown not-click">
Right Button Dropdown
<ul class="dropdown"><li class="title back js-generated"><h5>Back</h5></li><li class="parent-link hide-for-medium-up"><a class="parent-link js-generated" href="#">Right Button Dropdown</a></li>
<li>First link in dropdown</li>
<li class="active">Active link in dropdown</li>
</ul>
</li>
</ul>
<ul class="right hide-for-large-up">
<li class="active">Right Button</li>
<li class="has-dropdown not-click">
Right Dropdown
<ul class="dropdown"><li class="title back js-generated"><h5>Back</h5></li><li class="parent-link hide-for-medium-up"><a class="parent-link js-generated" href="#">Right Dropdown</a></li>
<li>First link in dropdown</li>
<li class="active">Active link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left show-for-large-up">
<li>Left Button</li>
</ul>
</section></nav>
</div>
Is there any option to put $last ng-repeat result like this <li class="active">Four</li> instead of <li>Four</li> ?
I have been trying with ng-if but unfortunately it did not give good solution yet :(
DEMO: http://codepen.io/anon/pen/bdvVRe
var app = angular.module('myapp', []);
app.controller('testController', function($scope) {
$scope.mymenu = ["one", "two", "three", "four"];
});
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
<div ng-controller="testController" class="container">
<strong>Expecting</strong>
<br />
<ol class="breadcrumb">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li class="active">Four</li>
</ol>
<hr />
<strong>Current result</strong>
<ol class="breadcrumb">
<li ng-repeat="menu in mymenu">{{menu}}</li>
</ol>
</div>
</div>
<li ng-repeat="menu in mymenu" ng-class="{active: $last}">
<a ng-if="!$last" href="#">{{menu}}</a>
<span ng-if="$last">{{menu}}</span>
</li>
Demo: http://codepen.io/anon/pen/domYZL
I've got an angularjs app with a nav bar inside my index.html page like that :
<div class="navbar navbar-inverse navbar-fixed-top" ng-controller="NavCtrl">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li>
Home
</li>
<li>
Add a contact
</li>
<li>
Users
</li>
<li>
Agencies
</li>
<li>
<a ng-click="intro()">Help</a>
</li>
</ul>
</div>
</div>
</div>
This div use a controller, and when i click on the help link it calls the intro method of my controller. But this method is called twice each time !!
This is my controller :
'use strict';
angular.module('myApp')
.controller('NavCtrl', function ($scope, $location) {
$scope.intro = function(){
if($location.path() != '/'){
toastr.warning("Warning.");
}else{
introJs().start();
}
}
});
Any idea ?..
This is the complete html :
<div class="navbar navbar-inverse navbar-fixed-top" ng-controller="NavCtrl">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li ng-class="navClass('')">
Home
</li>
<li ng-class="navClass('add')">
Add a contact
</li>
<li ng-class="navClass('users')">
Users
</li>
<li ng-class="navClass('agencies')">
Agencies
</li>
<li>
<a ng-click="intro()">Help</a>
</li>
</ul>
</div>
</div>
</div>
<div class="show-grid"></div>
<div class="container">
<div class="row" ng-view></div>
</div>
Resolved :
Someone (on my project) has added an angular.min script file ... We' have already the angular file for develoment ...
Two angular core library no conflict just methods called twice of course ...
Really my bad sorry guys thx for ur replies