<html ng-app>
<head>
</head>
<body data-ng-controller="Myfunc">
<ol type="i">
<li data-ng-repeat="c in cust | filter:name"> {{ c.name | lowercase}} - {{c.city | lowercase}}</li>
</ol>
<script src="angular.js"></script>
<script>
function Myfunc($scope)
{
$scope.cust=[
{name:'grimer',city:'ambernath'},
{name:'primer',city:'goregaon'}
];
}
</script>
</body>
</html>
custom controller not working in angularjs
don't know whether the custom script is working or not or something else
I have updated your code and it is now working:
<html>
<head></head>
<body>
<div ng-app>
<div data-ng-controller="Myfunc">
<ol type="i">
<li data-ng-repeat="c in cust | filter:name"> {{ c.name | lowercase}} - {{c.city | lowercase}}</li>
</ol>
<script src="angular.js"></script>
<script>
function Myfunc($scope) {
$scope.cust = [{
name: 'grimer',
city: 'ambernath'
}, {
name: 'primer',
city: 'goregaon'
}];
}
</script>
</div>
</div>
</body>
</html>
What I did is to move ng-app to a div and the data-ng-controller="Myfunc" to a div inside it.
You can find the working version at this js_fiddle url.
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>
Using the following code, I am successfully able to use this angularjs carousel.
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.1.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript">
var app = angular.module('app', ['ui.bootstrap']);
app.controller('CarouselDemoCtrl', CarouselDemoCtrl);
function CarouselDemoCtrl($scope){
$scope.myInterval = 3000;
$scope.noWrapSlides = false;
$scope.activeSlide = 0;
$scope.slides = [
{
image: 'http://lorempixel.com/400/200/'
},
{
image: 'http://lorempixel.com/400/200/food'
},
{
image: 'http://lorempixel.com/400/200/sports'
},
{
image: 'http://lorempixel.com/400/200/people'
}
];
}
</script>
</head>
<body>
<div>
Write your name here <input type="text" ng-model="name">
Hi {{name}} Those are your photos:
<div ng-controller="CarouselDemoCtrl" id="slides_control">
<div>
<uib-carousel interval="myInterval" active="activeSlide">
<uib-slide ng-repeat="slide in slides" index="$index">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{$index+1}}</h4>
</div>
</uib-slide>
</uib-carousel>
</div>
</div>
</div>
</body>
</html>
However, when I divide the content up into a subsequent app.js and then serve it as an html snippet including the carousel using ng-view as follows, it then doesn't work.
<body ng-app="app">
<div ng-include='"./templates/header.html"'></div>
<div ng-view></div>
<div ng-include='"./templates/footer.html"'></div>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.min.js"></script>
<script src="scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
<script src="scripts/app.js"></script>
</body>
It seems it's not able to refer to the function? I get the following console error
angular.js:13708 Error: [ng:areq] Argument 'CarouselDemoCtrl' is not a function, got undefined
Any help would be greatly appreciated! I got the code for the carouseldemo from https://codepen.io/Fabiano/pen/LACzk
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
how can i parse the particular 'li' field from the following using jquery template?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>JQTsDocument</title>
<link rel="stylesheet" href="css/layout1.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-template.js"></script>
<script id="lessons" type="text/x-jquery-tmpl">
<header>
<h1>${head1}</h1>
<img src="${image.source}" />
<nav>
<ul>
<li>
{{each li}}
{{/each}}
</li>
</ul>
</nav>
</header>
</script>
<script type="text/javascript">
var header = [{
"head1" : "JQT Doc",
"image" : {
"source" : "images/logo.png",
"alternate" : "JQT Doc"
},
"nav" : [{
"ul" : [{
"li" : "1st"
}, {
"li" : "2nd"
}]
}]
}];
$(document).ready(function() {
$('#lessons').tmpl(header).appendTo('body');
});
</script>
</head>
<body></body>
Getting no idea how to parse that "li" using each loop inside the template and if the i want to access the nav elements how can i do that
I think what you are looking for is this
<script id="lessons" type="text/x-jquery-tmpl">
<header>
<h1>${head1}</h1>
<img src="${image.source}" />
<nav>
<ul>
<li>
{{each nav[0].ul}}
<div>${li}</div>
{{/each}}
</li>
</ul>
</nav>
</header>
</script>
You can find a working sample here.
I am trying to load some ajax Content, but whenever i click on the link jQuery does not respond.
Heres my html with jquery
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="e3.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$.ajaxSetup ({
cache: false
});
var ajax_load = "<img src='img/site/loader.gif' alt='loading...' />";
// load() functions
$(document).ready(function()
{
$("#omtA").click(function()
{
var loadUrl = "fomt.php";
$("#usr")
.html(ajax_load)
.load(loadUrl, "fid=<?php echo $fid;?>");
}
);
);
</script>
</head>
<body>
<div id="page">
<div id="content">
<div id="up">
<div id="tab">
<ul id="tabmenu">
<li id="anm" class="tbs blue"><span>Anm</span></li>
<li id="kom" class="tbs blue"><span>Kom</span></li>
<li id="omt" class="tbs blue"><span>Omt</span></li>
<li id="sts" class="tbs blue"><span>Sts</span></li>
</ul>
</div>
<div id="usrp">
<a name="usrl"></a>
<div id="usr">
hans
</div>
</div>
</div>
</div>
<div id="bottom">
</div>
</div>
</body>
</html>
But when I click on the the Omt link with the id omtA nothing happends.
I have also tried
$("a#omtA").click(function()
make the link a class and tried
$(".omtA").click(function()
and
$("a.omtA").click(function()
But none of that helped.
Use this.. You have missed the closing brace } ..
$(document).ready(function() {
$("#omtA").click(function() {
var loadUrl = "fomt.php";
$("#usr")
.html(ajax_load)
.load(loadUrl, "fid=<?php echo $fid;?>");
});
});
It looks like you are missing an ending brace:
$(document).ready(function() {
$("#omtA").click(function() {
var loadUrl = "fomt.php";
$("#usr")
.html(ajax_load)
.load(loadUrl, "fid=<?php echo $fid;?>");
});
}/* <- that brace was missing */);