I have following code, and let you know that i am new to angularjs
<!DOCTYPE html>
<html data-ng-app="">
<head>
<!-- <script src="scripts/angular.js"></script>-->
<title>Angular js</title>
</head>
<body data-ng-init="names=['Ran','Run','Run']">
<br />
<ul>
<li data-ng-repeat="personName in names">{{personName}}</li>
</ul>
<script src="scripts/angular.min.js"></script>
</body>
</html>
There is no value shown from the names in li .....
any Help or suggestion to solve the issue
If you open console of your browser, you can see error:
Duplicates in a repeater are not allowed.
Use 'track by' expression to specify unique keys. Repeater: personName in ['Ran','Run','Run'], Duplicate key: string:Run
You have two same items in array (Run).
Delete last "Run" from array, and it will work fine.
Please, see:
Plunker
Please remove one 'Run' from your data-ng-init
And it will work fine..
<!DOCTYPE html>
<html data-ng-app="">
<head>
<!-- <script src="scripts/angular.js"></script>-->
<title>Angular js</title>
</head>
<body data-ng-init="names=['Ran','Run']">
<br />
<ul>
<li data-ng-repeat="personName in names">{{personName}}</li>
</ul>
<script src="JS/angular-1.2.10.min.js"></script>
</body>
</html>
Related
In my entry.html I have 2 hyperlinks pointing to the same index.html file. Now, in index.html I need to find which link the user clicked to navigate to index html and do some operation based on the link.
entry.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
Link A
Link B
</body>
</html>
index.html
<!DOCTYPE html>
<html>
<head>
<title>Index HTML</title>
</head>
<body>
<p id="demo">This is it.</p>
<script>
// How to find the link clicked by user
</script>
</body>
</html>
You can make use of query params in the links and call location.search on the redirected page to detect which link was clicked.
Refer to the code modification to your original code-
entry.html:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
Link A
Link B
</body>
</html>
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Index HTML</title>
</head>
<body>
<p id="demo"></p>
<script>
let linkName=location.search;
document.getElementById('demo').innerHTML=linkName.split('=')[1].toUpperCase()+' was Clicked !!!';
</script>
</body>
</html>
Entry:
Link A
Link B
Index:
console.log(location.hash)
or
Entry:
Link A
Link B
Index:
console.log(location.search)
or clearer
const url = new URL(location.href)
console.log(url.searchParams.get("link"))
Is there any reason why bootstrap slider is not being recognised as a function even though the correct dependencies are there?
The jquery ui files downloaded that are present in the web app folder are customised to not contain slider widget conflict functions.
<!doctype html>
<html lang="en">
<head>
<script src="bootstrap-slider.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap-slider.css">
<script src="jquery-3.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
<script src="jquery-ui.js"></script>
<title>Bootstrap Slider</title>
<style>
</style>
<script>
$("#ex1").bootstrapSlider({
formatter: function(value) {
return "Current value: " + value;
}
});
</script>
</head>
<body>
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14" />
</body>
</html>
Please provide a jsfiddle or a screenshot of your console. If you say that you got all the dependencies (as I think your code is correct), I'm guessing you may have a problem with your paths.
<!doctype html>
<html lang='en'>
<head>
<meta charset-"UTF-8">
<title>devang</title>
<link rel="stylesheet" href="bootstrap.css">
<script> src="lib/onsen/js/angular/angular.min.js" </script>
<script> src="lib/onsen/js/angular/angular.js" </script>
</head>
<body>
<div class="container" ng-app="App">
<div ng-controller="controller">
<ul>
<li ng-repeat="artist in artists">
{{artist.name}}
</li>
</ul>
</div>
</div>
<script>
angular.module('App',[]).
controller('controller',function($scope,$http){
$http.get('artists.json').success(function(data){
$scope.artists = data;
});
});
</script>
</body>
</html>
when i execute it shows error
angular is not defined
The character encoding of the HTML document was not declared.
The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.
need your suggesions
Your script tags are defined incorrectly.
the SRC should be an attribute of the script tag.
<script src="lib/onsen/js/angular/angular.min.js"></script>
<script src="lib/onsen/js/angular/angular.js"></script>
Maybe is a stupid question but I'm really new with Angular and trying to pick up some knowledges. So I have a scope which I get via API ($http) and after conversion is a html markup
<li>some list</li>
and I would like to project this one in DOM, trying
<ul>{{myscopevariable}}</ul>
but I get just the raw text
with php would be like <ul><?= myscopevariable ?></ul>
JS
angular.module("myApp", ["ngSanitize"]).controller("MyCtrl", function($scope){
$scope.someHTML = "<li>just testing</li>";
})
HTML
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
<script data-require="angular.js#*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular-sanitize.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="MyCtrl">
<h1>Hello Plunker!</h1>
<ul ng-bind-html="someHTML">
</ul>
</body>
</html>
http://plnkr.co/edit/e1zoOrEVwqdIDPujMpPC?p=preview
Use the ng-bind-html directive (Documentation here). Prior to 1.2 there also existed ng-bind-html-unsafe.
In your example:
<ul>some list</list>
<li ng-bind-html='myscopevariable'></li>
....
</ul>
You have to include the ngSanitize module to have it work (e.g. <script src="http://code.angularjs.org/1.2.14/angular-sanitize.js"></script> in Header and var app = angular.module('plunker', ['ngSanitize']);)
See this plunker example for some working code.
The following code displays only the input box when run in the browser (Chrome). It seems to have broken when I attempted using the ng-controller directive.
<!doctype html>
<html ng-app="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"> </script>
<script>
function SController($Scope) {
$Scope.customers =
[{name:'John Smith',city:'Kingston'},
{name:'Jane Doe',city:'Ocho Rios'},
{name:'Brian Wade',city:'Negril'},
{name:'John Barker',city:'Mandeville'} ];
}
</script>
</head>
<body ng-controller="SController">
<div class="container">
<input type="text" data-ng-model="name"/>
<ul>
<li ng-repeat="person in customers | filter:name | orderBy:'city'">{{ person.name}} - {{ person.city }} </li>
</ul>
</div>
</body>
</html>
Well, at first sight, it seems that you're using $Scope instead of the correct $scope. Replace those occurrences and try again.