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
Related
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.
Directive template :
<script type="text/ng-template" id="child-map.html">
<b ng-click="selectNode(child.id)">{{child.title}}</b>
<ul ng-if="child.children.length">
<li ng-repeat="child in child.children" ng-include="clild-map.html"></li>
</ul>
</script>
<b ng-click="selectNode(mapData.id)">{{mapData.title}}</b>
<ul ng-if="mapData.children.length">
<li ng-repeat="child in mapData.children" ng-include="child-map.html" ></li>
</ul>
Directive definition :
function widgetNodeMap () {
var nodeMap = {};
nodeMap.restrict = 'E'
nodeMap.scope = {
'mapData' : '=mapData'
}
nodeMap.controller = ['$scope',function($scope){
// $scope.currentNode = $scope.mapData.id;
$scope.selectNode = function(node_id){
$scope.currentNode = node_id;
}
$scope.getCurrentNode = function(){
return $scope.currentNode;
}
}];
nodeMap.templateUrl = '/static/app/components/widget/widget.view.node-map.html';
return nodeMap
}
Main template :
<widget-node-map map-data="navCtrl.mapData">
</widget-node-map>
But still i cannot get the data listed properly. Can you help me, where Im wrong?
I figured the solution
<script type="text/ng-template" id="child-map.html">
<ul ng-if="child.children.length">
<li ng-repeat="child in child.children">
<a ng-click="selectNode(child)">{{child.title}}</a>
<div ng-include src="'child-map.html'"></div>
</li>
</ul>
</script>
<div class="row">
<div class="col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2 col-sm-12 col-xs-12">
<a ng-click="selectNode(mapData)">{{mapData.title}}</a>
<ul ng-if="mapData.children.length">
<li ng-repeat="child in mapData.children">
<a ng-click="selectNode(child)">{{child.title}}</a>
<div ng-include src="'child-map.html'"></div>
</li>
</ul>
</div>
</div>
In reference to the answer by Sergey Romanov
Only vertical tabs show up... The tab content div never gets displayed when I used his code.
Here is my code
<div class="row">
<div class="col-sm-3">
<ul class="nav nav-tabs nav-stacked nav-pills" role="tablist">
<li ng-class="{'active': view_tab == 'tab1'}">
<a class="btn-lg" ng-click="changeTab('tab1')" href="">My Tab 1</a>
</li>
<li ng-class="{'active': view_tab == 'tab2'}">
<a class="btn-lg" ng-click="changeTab('tab2')" href="">My Tab 2</a>
</li>
</ul>
</div>
<div class="col-sm-9">
<div class="tab-content">
<div class="tab-pane" ng-show="view_tab == 'tab1'">
This is tab 1 content
</div>
<div class="tab-pane" ng-show="view_tab == 'tab2'">
This is tab 2 content
</div>
</div>
var NavController = function ($scope,$http) {
$scope.changeTab = function(tab) {
$scope.view_tab = tab;
}
};
NavController.$inject = ['$scope','$http'];
angular.module('publisherApp').controller('NavController', NavController);
For Bootstrap tab content you need to set which tab is active:
var NavController = function($scope, $http) {
$scope.changeTab = function(tab) {
$scope.view_tab = tab;
}
};
NavController.$inject = ['$scope', '$http'];
angular.module('app', []).controller('NavController', NavController);
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app='app' ng-controller='NavController'>
<div class="col-sm-3">
<ul class="nav nav-tabs nav-stacked nav-pills" role="tablist">
<li ng-class="{'active': view_tab == 'tab1'}">
<a class="btn-lg" ng-click="changeTab('tab1')" href="">My Tab 1</a>
</li>
<li ng-class="{'active': view_tab == 'tab2'}">
<a class="btn-lg" ng-click="changeTab('tab2')" href="">My Tab 2</a>
</li>
</ul>
</div>
<div class="col-sm-9">
<div class="tab-content">
<div class="tab-pane" ng-class="{active: view_tab == 'tab1'}">
This is tab 1 content
</div>
<div class="tab-pane" ng-class="{active: view_tab == 'tab2'}">
This is tab 2 content
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<span class="navbar-brand">Suivi Des Tables</span>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="{{item.class}}" ng-repeat="item in menu" ng-class="{active : item == itemcourant}"><a ng-click="selectItem(item);tab={{item.tab}}" href="#{{item.nom}}">{{item.nom}}</a></li>
<li><a ng-click="tab=1" href="#">test</a></li>
</div>
</div>
</div>
Problem is : ng-click="selectItem(item);tab={{item.tab}}"
Please see demo below
You should pass item to controller and make all logic inside controller
var app = angular.module('app', []);
app.controller('firstCtrl', function($scope) {
$scope.menu = [{
tab: "One",
nom: "Link A"
}, {
tab: "Two",
nom: "Link B"
}];
$scope.selectItem = function(item) {
$scope.tab = item.tab;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="firstCtrl">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<h2>Tab: {{tab}}</h2>
<div class="navbar-header">
<span class="navbar-brand">Suivi Des Tables</span>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="{{item.class}}" ng-repeat="item in menu" ng-class="{active : item == itemcourant}"><a ng-click="selectItem(item)" href="#{{item.nom}}">{{item.nom}}</a>
</li>
<li><a ng-click="tab=1" href="#">test</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</body>
so I'm stacking on this problem.
I try to create tabs with loading via ng-include the contents. But doesn't matter what kind of url I include I get always this error http://goo.gl/yyNeQb
I don't have anything else included (Controller,...)
Someone any idea?
<ul class="nav nav-tabs">
<li ng-class="{active: main.active.tab == 'register'}" class="active">
<a ng-click="main.active.tab = 'register'">Register</a>
</li>
<li ng-class="{active: main.active.tab == 'login'}">
<a ng-click="main.active.tab = 'login'">Login</a>
</li>
</ul>
<div class="tab-content">
<div ng-switch="main.active.tab">
<div
ng-switch-when="register"
ng-include src="'../angular/views/register.html'">
</div>
<div
ng-switch-when="login"
ng-include src="'../angular/views/login.html'">
</div>
</div>
</div> <!-- tab content-->
If I include a Controller like this
<script type="text/javascript" src="../angular/controller/RegisterController.js"></script>
The source will be load and I can work with it.
Have not tested it immediately but can you try this instead?
<div class="tab-content">
<div ng-switch="main.active.tab">
<div ng-switch-when="register">
<ng-include src="'../angular/views/register.html'"></ng-include>
</div>
<div ng-switch-when="login">
<ng-include src="'../angular/views/login.html'"></ng-include>
</div>
</div>
</div>