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
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.
Below snippet doesn't run.
What am I missing here with ng-init?!!
If I change array values to 'non-repeating' values it works.
For example, changing
names=['Jani','Hege','Kavi','Kavi2']
it works.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<body>
<div ng-app="" ng-init="names=['Jani','Hege','Kavi','Kavi']">
<p>Looping with ng-repeat:</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
</body>
</html>
This track by $index: you can check documentation - Tracking and Duplicates
<li ng-repeat="x in names track by $index">
{{ x }}
</li>
in my application, I have two controllers, in the first controller, I have a text input and ul so that I can filter list with filter:$rootScope.test, in the other controller I have only ul. What I want to is be able to filter ul from first(namesCtrl) and second controler (x) in parallel. I am using $rootScope as model, it is working on first controller, but not in the second. Can someone please show how to filter ul of first controller and second in same time ?
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<body>
<div ng-app="myApp" >
<div ng-controller="namesCtrl">
<p>Type a letter in the input field:</p>
<p><input type="text" id="dSuggest" ng-model="$rootScope.test" ></p>
<ul>
<li ng-repeat="x in names | filter:$rootScope.test">
{{ x }}
</li>
</ul>
</div>
<hr/>
<div ng-controller="x">
<ul>
<li ng-repeat="x in names | filter:$rootScope.test">
{{ x }}
</li>
</ul>
</div>
</div>
<script>
$('#dSuggest').on("input", function(d){console.log($('#dSuggest').val())});
var app = angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
});
app.controller('x', function($scope, $rootScope) {
console.log($rootScope);
$scope.names = [
'Jani',
'Margareth',
'Hege',
'Joe',
];
})
</script>
<p>The list will only consists of names matching the filter.</p>
</body>
</html>
Just remove your input out of the namesCtrl controller, like this for instance:
...
<div ng-app="myApp" >
<div >
<p>Type a letter in the input field:</p>
<p><input type="text" id="dSuggest" ng-model="$rootScope.test" ></p>
<ul ng-controller="namesCtrl">
<li ng-repeat="x in names | filter:$rootScope.test">
{{ x }}
</li>
</ul>
...
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>
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