HTML:
<!-- Order -->
<li ui-sref-active="active">
<a ui-sref="order" class="main_link">
<i class="fa fa-shopping-cart"></i>Order
</a>
<a ui-sref="order/create"><span class="plus">+</span></a>
<div class="clearfix"></div>
</li>
I want to add class="active" on <li>.
Whenever click on <a ui-sref="order/create"><span class="plus">+</span></a> this, that time class="active" add on <li>.
BUT
click on
<a ui-sref="order" class="main_link"><i class="fa fa-shopping-cart"></i>Order</a> that time class="active" not add on <li>.
Your help would be appreciated.
The way the ui-router is currently implemented it is not possible to do that. You can't specify for which particular ui-sref the ui-sref-active will be activated. That being said, it should be easier to adjust your template to wrap those links in such a way that you can have one ui-sref-active per one ui-sref. At least easier than adjusting ui-router behaviour.
app.js
var app = angular.module('plunker', ['ui.router']);
app.config([ '$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/home/flow");
$stateProvider.state("home", {
url : '/home',
templateUrl : 'home.html',
}).state("contact", {
url : '/contact',
template : 'contact',
});
}]);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<li class="top" ui-sref-active="heaader_active">
<a ui-sref="home"><i class="fa fa-cloud-upload"></i> Home</a>
<a ui-sref="contact"><i class="fa fa-cloud-upload"></i> contact</a>
</li>
<ui-view/>
</body>
</html>
style.css
/* Put your css in here */
.heaader_active {
background: red;
}
More Detail Check Here
Related
Below is a HTML page, Couldn't get content when click on page 1
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>
<script src="JavaScript.js"></script>
</head>
<body ng-app="myapp">
<div class="Container">
<nav class="navbar navbar-default">
<ul class="navbar navbar-nav">
<li>
Page 1
Page 2
Page 3
</li>
</ul>
</nav>
</div>
<div ng-view></div>
<script>
var app = angular.module("myapp", ["ngRoute"]);
app.config(function ($routeProvider){
$routeProvider.when("/page1", {
template : <h1>Page 1</h1>
})
.when("/page2", {
template: <h1>Page 2</h1>
})
.otherwise({
template: <h1>note found</h1>
})
});
</script>
</body>
</html>
Is there any mistake in above code. Is issue with reference.
Can someone please correct it?
Page 3 will not show anything.
The first mistake you missed around quotes for templates in javascript code:
$routeProvider.when('/page1', {
template : '<h1>Page 1</h1>'
})
.when("/page2", {
template: '<h1>Page 2</h1>'
})
.otherwise({
template: '<h1>note found</h1>'
});
And no need to use a exclamation mark in links:
Page 1
Page 2
Page 3
You can use redirectTo() method with otherwise() method. Also, have to put href="#" under <a> tag.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<body ng-app="myApp">
<p>Main</p>
Red
Green
Oranger
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.otherwise({redirectTo:'/'});
});
</script>
<p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to "main.htm"</p>
</body>
</html>
There are a couple of mistakes: First, in the href, you have used capital P whereas in route definition it's small letter i.e p, 2nd you do not need to use ! in the href i.e it should be like href=#page1 and the 3rd one is template should be as string i.e under single/double quote.
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>
<script src="JavaScript.js"></script>
</head>
<body ng-app="myapp">
<div class="Container">
<nav class="navbar navbar-default">
<ul class="navbar navbar-nav">
<li>
Page 1
Page 2
Page 3
</li>
</ul>
</nav>
</div>
<div ng-view></div>
<script>
var app = angular.module("myapp", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider.when("/page1", {
template: '<h1>Page 1</h1>'
})
.when("/page2", {
template: '<h1>Page 2</h1>'
})
.otherwise({
template: '<h1> note found </h1>'
})
});
</script>
</body>
</html>
I am working on an application in Electron, on this page I have put a button however the script does not run when clicked. Any help would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<link class="menu-bar" rel="stylesheet" href="../css/index.css">
<link class="main" rel="stylesheet" href="../css/ceaser.css">
<meta charset="utf-8">
<title>Cipher Program</title>
</head>
<body>
<!-- Navigation Bar -->
<ul class = "menu-bar">
<li> Menu </li>
<li><a class="active" href="ceaser.html">Ceaser Cipher</a></li>
<li>Vernam Cipher </li>
<li>Frequency Analysis</li>
</ul>
<div class="main">
<h1>Ceaser Cipher</h1>
<button type="button" onclick="test()">Click me </button>
<script type="text/javascript">
function test() {
console.log("got this far")
}
</script>
</div>
</body>
Add some cdn for .js to work with javascript library functions as i see theres no library imported to work with javascript like
<script src="your_js/cdn"....></script>
Console.log will display text in a terminal window. If you are trying to display something in a browser you have to change the DOM.
<!DOCTYPE html>
<html>
<head>
<link class="menu-bar" rel="stylesheet" href="../css/index.css">
<link class="main" rel="stylesheet" href="../css/ceaser.css">
<meta charset="utf-8">
<title>Cipher Program</title>
</head>
<body>
<!-- Navigation Bar -->
<ul class = "menu-bar">
<li> Menu </li>
<li><a class="active" href="ceaser.html">Ceaser Cipher</a></li>
<li>Vernam Cipher </li>
<li>Frequency Analysis</li>
</ul>
<div class="main">
<h1>Ceaser Cipher</h1>
<div id="message"></div>
<button type="button" onclick="test()">Click me </button>
<script type="text/javascript">
function test() {
console.log("got this far");
document.getElementById("message").appendChild(document.createTextNode("You see me now"));
}
</script>
</div>
</body>
Simplest way is to create an empty "div" with id of your choosing. Then in javascript use the document object "document" and it's functions like ".write" or ".appendChild" to change the DOM.
You should be able to run the above code in the stack overflow sandbox and see that the output to terminal (console.log) is different than the browser rendered DOM (getElementById("message").appendChild)
your Code should output something in the Browserconsole.
You can open the Developertools afaik with Ctrl+Alt+i.
To output / connect with the Mainapplication you should use IPC.
See: https://electronjs.org/docs/api/ipc-main
Greets
Here's the Plunk Code can Verify Now also
http://next.plnkr.co/edit/vrI2haNy1zYPDcCWh7gj?p=preview&utm_source=legacy&utm_medium=worker&utm_campaign=next&preview
Java Script Code: it is containing dummy json there root node is Admin System and there sub menu are Like Angular, Linux, Server
Here UI will be shown as Given Below Format and this Menu will be able to Expendable and Close able or collapse so this will be fetch the data as from Service and same way can be use in project
angular.module('myapp', ['ui.bootstrap'])
.controller("MainController", ["$scope",
function($scope){
$scope.bodyText = "Test Menu";
$scope.showSubmenu = function(item) {
if($scope.activeParentIndex === item){
$scope.activeParentIndex = "";
}else{
$scope.activeParentIndex = item;
}
}
$scope.isShowing = function(index) {
if($scope.activeParentIndex === index){
return true;
} else{
return false;
}
};
$scope.modulos =
[{"module":"Admin System ",
"adm_modulo_id":1,
"submodule":[{"res":"Angular","url":"#/admin/1"},
{"res":"Linux","url":"#/admin/2"},
{"res":"Server","url":"#/admin/3"}
]
}];
}]);
Html Code: it will show dummy json code as menu and sub-menu
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css#3.x" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="http://code.angularjs.org/1.2.9/angular.js" data-semver="1.2.9"></script>
<script data-require="ui-bootstrap#*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1>Test</h1>
<div ng-controller="MainController">
{{bodyText}}
<ul class="sidebar-menu" ng-repeat="m in modulos">
<li class="treeview" ng-repeat="(itemIndex, item) in modulos">
<a ng-click="showSubmenu(itemIndex)">
<i class="fa fa-table"></i> <span>{{item.module}}</span>
</a>
<ul class="sub-nav" ng-show="isShowing(itemIndex)">
<li ng-repeat="sub_element in m.submodule">
{{sub_element.res}}
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I am using ng-repeat in angularJS to create elements. I want to apply id to the element which is repeated, in this case li
HTML Code:
<li id="{{item}}" ng-repeat="item in itmes"></li>
All the syntax and declaration is perfect in my code. However, the above code does not work. I want below output to be generated. If items = ['one', 'two', 'three']
<li id="one" ng-repeat="item in items">...</li>
<li id="two" ng-repeat="item in items">...</li>
<li id="three" ng-repeat="item in items">...</li>
Is it possible using angularJS?
Try this
<li ng-attr-id="{{item}}" ng-repeat="item in itmes"></li>
EDIT
Here is the
HTML
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div ng-controller="testCtrl">
<ul>
<li ng-attr-id="{{item}}" ng-repeat="item in items">{{ item }}</li>
</ul>
</div>
</body>
</html>
JS
// Code goes here
(function () {
'use strict';
var app = angular.module('app', []);
app.controller('testCtrl', ['$scope',
function ($scope) {
$scope.items = ['one', 'two', 'three'];
}
]);
})();
and output
and plunker
http://plnkr.co/edit/M6BDcJ2csgBR4C9TNdbz?p=preview
you have typo in items.
<li id="{{item}}" ng-repeat="item in itmes"></li>
item in `itmes`
change this to items and try.
DEMO
I am trying to load some external data into a JQTouch app using JSON. My problem is I don't know what js to use and where to put it.
My html is very simple - a few divs for the pages in the app.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"> google.load("jquery", "1.4.2"); </script>
<script type="text/javascript" src="jqtouch/jqtouch.min.js" charset="utf-8"></script>
<script type="text/javascript"> $.jQTouch(); </script>
<script src="javascripts/cricket.js" type="text/javascript"></script>
<style type="text/css" media="screen">#import "jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">#import "themes/apple/theme.css";</style>
<title>Cricket</title>
</head>
<body>
<!-- "Main Menu" -->
<div id="home" class="current">
<div class="toolbar">
<h1>Cricket</h1>
</div>
<ul class="rounded">
<li class="arrow">Clubs</li>
<li class="arrow">Fixtures</li>
<li class="arrow">Twitter</li>
</ul>
<ul class="rounded">
<li class="arrow">About</li>
</ul>
</div>
<!-- "Clubs" - Will contain the list of clubs -->
<div id="clubs">
<div class="toolbar">
<h1>Clubs</h1>
<a class="button back" href="#">Back</a>
</div>
<div id="clubslist">
Loading....
</div>
</div>
<!-- "Fixtures" - Will contain the list of fixtures -->
<div id="fixtures">
<div class="toolbar">
<h1>Fixtures</h1>
<a class="button back" href="#">Back</a>
</div>
<ul class="rounded">
<li>Loading....</li>
</ul>
</div>
<!-- "Twitter" - Will contain the tweets -->
<div id="twitter">
<div class="toolbar">
<h1>Twitter</h1>
<a class="button back" href="#">Back</a>
</div>
<ul class="rounded">
<li>Loading tweets....</li>
</ul>
</div>
<!-- "About" - Will contain info about the app/contact -->
<div id="about">
<div class="toolbar">
<h1>About</h1>
Back
</div>
just some text
</div>
Then this is the script that I think I need to use to load the external data (from clubs.php).
<script type="text/javascript">
$.getJSON('http://www.mydomain.com/clubs.php', function(data) {
$.each(data, function(i,item){
$('clubslist').append('<li>' + item.club_name + '</li>');
});
});
</script>
My question is where do I need to putthis and how does it get triggered?
I think I need to put this in a separate JS file (I have already got one called cricket.js which i linked to in the head of the html file). Then I assume I need something to trigger the JS to run... like PageAnimationEnd or similar?
For what it's worth, this is what the clubs.php returns
{"posts":[{"post":{"club_id":"1","club_name":"ABC Cricket Club","club_postcode":"AB12 3DE"}},{"post":{"club_id":"2","club_name":"Beston Cricket Club","club_postcode":"NG1 9XY"}}]}
My ideal situation is that when the user clicks on the 'Clubs' link on the menu page, this fires the page animation where the user then sees 'Loading'. In the background, the Javascript is fired, retrieves the data from clubs.php and then appends it in to the #clublist div.
I think I am close, but missing the final finishing touch. All suggestions appreciated!
Tom
In my pages I do the following, in this example I am pulling a table from a backend script.
function prevOrders()
{
$("#chkPrevOrd").html('Please wait')
$.ajax({
type: "POST",
url: "http://"+document.domain+"/store.php",
data: { method: "prevOrders"},
dataType: "json",
timeout: ajaxTimeout,
success: function(data){
if (data.prevOrders)
{
$("#prevOrderStatus").html(data.prevOrders);
$("#chkPrevOrd").html('Update')
}
},
error: function() {
alert('This is taking too long. You could try again now, or wait and try again later.');
}
});
}
#prevOrderStatus is a DIV on this page, #chckPrevOrd is just a button to let the user know what is happening. you would JQT.Goto('cointainer div for #chkPrevOrd') to go to this page if #chkPrevOrd was actually on a different page.