Iam newbie in Angular js,I have started working on few snippets in angular but didnt get answers while working with two snippets.I have been scratching my head to understand ,Any help is greatly appreciated.In the below code whenever I am pressing the button the value isnt getting changed
<html ng-app="secondmodule">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script>
var demo = angular.module("secondmodule", []);
demo.controller("controlsample", function() {
var app = this;
app.myname = "xyz";
app.mysurname = "mno";
app.myaddress = "pqr";
app.changeme = function() {
app.myname = "abc";
};
});
</script>
</head>
<body ng-controller="controlsample as samp">
<h1>hey iam {{samp.myname}}</h1>
<h2>{{samp.myaddress}}</h2>
<button ng-click="samp.changeme">clickme</button>
</body>
</html>
In the below code I have used ng-repeat ,but no output is being generated
<html ng-app="mymodule">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script>
angular.module("mymodule", []).controller("mycontrol", function() {
this.bikes = [{
id: 1,
name: 'a',
not: 3
}, {
id: 4,
name: 'b',
not: 6
}, {
id: 7,
name: 'c',
not: 9
}];
});
</script>
</head>
<body ng-controller="mycontrol as ctrl">
<h1 ng-repeat=bikedemo in ctrl.bikes>
<h2 ng-bind="bikedemo.id"></h2>
<h2>{{bikedemo.name}}</h2>
<h2>{{bikedemo.not}}</h2>
</h1>
</body>
</html>
Thanks for your help in advance,Any resources suggested in learning angular will be of great use to me
first one
<script>
var demo=angular.module("secondmodule",[]);
demo.controller("controlsample",function($scope)
{
$scope.myname="xyz";
$scope.mysurname="mno";
$scope.myaddress="pqr";
$scope.changeme=function()
{
$scope.myname="abc";
};
});
</script>
<body ng-app = "secondmodule" ng-controller="controlsample">
<h1 >hey iam {{myname}}</h1>
<h2>{{myaddress}}</h2>
<button ng-click="changeme()">clickme</button>
</body>
second one
<html >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script>
angular.module("mymodule",[]).controller("mycontrol",function($scope)
{
$scope.bikes=[{id:1,name:'a',not:3},
{id:4,name:'b',not:6},
{id:7,name:'c',not:9}
];
});
</script>
</head>
<body ng-app="mymodule" ng-controller="mycontrol">
<ul ng-repeat ="bikedemo in bikes">
<li>
<h2 ng-bind="bikedemo.id"></h2>
<h2>{{bikedemo.name}}</h2>
<h2>{{bikedemo.not}}</h2>
</li>
</ul>
</body>
</html>
1st you miss open and closing bracket when execute a function
<button ng-click="samp.changeme()">clickme</button>
2nd replace h1 with div or ul/li tag. you could not nested header tag.
<div ng-repeat="bikedemo in ctrl.bikes">
<h2 ng-bind="bikedemo.id"></h2>
<h2>{{bikedemo.name}}</h2>
<h2>{{bikedemo.not}}</h2>
</div>
For first :
<html ng-app="secondmodule">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script>
var demo=angular.module("secondmodule",[]);
demo.controller("controlsample",function()
{
var app=this;
app.myname="xyz";
app.mysurname="mno";
app.myaddress="pqr";
app.changeme=function()
{
app.myname="abc";
};
});
</script>
</head>
<body ng-controller="controlsample as samp">
<h1 >hey iam {{samp.myname}}</h1>
<h2>{{samp.myaddress}}</h2>
<button ng-click="samp.changeme()">clickme</button>
</body>
You missed calling the function ie functionName(). Just add those brackets.
For the second one, try this :
<html ng-app="mymodule">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script>
angular.module("mymodule",[]).controller("mycontrol",function()
{
this.bikes=[{id:1,name:'a',not:3},
{id:4,name:'b',not:6},
{id:7,name:'c',not:9}
];
});
</script>
</head>
<body ng-controller="mycontrol as ctrl">
<h1 ng-repeat =bikedemo in ctrl.bikes>
{{bikedemo.id"}}
{{bikedemo.name}}
{{bikedemo.not}}
</h1>
</body>
</html>
Regarding the resources to learn AngularJS you can start with,
Shaping up with Angular.js - Code School a great course for Angular.js fundamentals.
Then you can follow up with,
A Better Way to Learn AngularJS - Thinkster and courses from egghead.io and you can read some book too, this book Pro AngularJS by Adam Freeman is great.
The courses from Pluralsight are great too
Your code has some errors:
For 1st Code Snippet
You did not specified your ng-app
Calling the function in ng-click should contain parenthesis as if you're calling a function in javascript ng-click="samp.changeme()"
For 2nd Code Snippet
Header tags cannot be nested with other header tags
Your ng-repeat expression is not enclosed in double quotes
Related
I am new to handlehars, and feel the basic tutorials are not very newbie friendly. I have to put pieces together and the following code seems not working. The html is generated correctly which means it does work but nothing shows up.
<!DOCTYPE html>
<html lang="en">
<head>
<title>test handlebars</title>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
</script>
</head>
<body>
<div class="container"></div>
<script>
$(document).ready(function(){
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var context = {title: "My New Post", body: "This is my first post!"};
var html = template(context);
console.log(html);
$(".container").innerHTML = html;
});
</script>
</body>
$(".container").innerHTML = html;
You're mixing vanilla JS and jQuery. Either set the HTML the vanilla way,
document.querySelector(".container").innerHTML = html;
or the jQuery way:
$(".container").html(html);
I know there are multiple questions related to my issue, but I still have problem fixing this. I have the following html and JavaScript code:
<!doctype html>
<html ng-app="Demo">
<head>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
</head>
<body ng-controller="AppController">
<input type="" name="" ng-model="docs[1].value">
{{m3.value}}
{{m4}}
<script type="text/javascript">
var app = angular.module('Demo', []);
app.controller(
"AppController",
function( $scope ) {
$scope.docs=[{value:"first doc"}, {value:"second doc"}];
$scope.m3=$scope.docs[1];
$scope.m4=$scope.docs[1].value;
}
);
</script>
</body>
</html>
When I type in the input, the m3.value gets updated but m4 does not! I can't figure out why this is happening. Any comment is appreciated.
Statement 1 :
$scope.m3=$scope.docs[1];
This statement storing the reference for model docs[1]
so, {{m3.value}} will get updated model value.
Statement 2 :
$scope.m4=$scope.docs[1].value;
This statement copying the actual primitive value.
so, {{m4}} still get old value
Ok so the way I solved it is to add a watcher to m3.value:
$scope.$watch('m3.value', function(){
console.log('Changing');
$scope.m4 = $scope.m3.value;
});
And now $scope.m4 updates.
I tried to create two buttons, so that when I click on each- I will get a pop up small window, with a content that it will get while onloading.
This is the code:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp">
<p ng-controller="ctrl">
<span ng-repeat="x in items">
<button ng-click="parentFunc(x.fieldOne,x.fieldTwo)">{{x.fieldOne}}</button>
<br><br>
</span>
</p>
<script>items();</script>
</body>
</html>
script.js:
var title, content;
function items(){
angular.module('myApp', []).controller('ctrl', function($scope) {
$scope.items = [
{fieldOne:"field1", fieldTwo:"field1 content"},
{fieldOne:"field2", fieldTwo:"field2 content"}
];
$scope.parentFunc=function(titleTmp,contentTmp){
title=titleTmp;
content=contentTmp;
var OpenWindow = window.open('popUp.html','_blank','width=500, height=400');
return false;
}
});
}
function codeAddress() {
document.getElementById("title").innerHTML=title;
document.getElementById("content").innerHTML=content;
}
popUp.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="script.js"></script>
</head>
<body onload="codeAddress();">
<h1 id="title"></h1>
<div id="content"></div>
</body>
</html>
The new pop up window open as expected, but the h1 and div in it get undefined. I tried to debug it, and I saw that after the first two lines of parentFunc are executed, the global variables title and content get what I expect and they are not undefined. However, when the third line is executed and the new window get opened- the global variables are undefined.
Why the two global variables are undefined in the pop up window?
And how can I solve this?
Your method won't work : you are trying to reload the script.jsand then, the vars are reinitialized.
Add your vars in the URL :
var OpenWindow = window.open('popUp.html?title='+titleTmp+'&content='+contentTmp,'_blank','width=500, height=400');
Then, in your second page, read those parameters :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript">
function codeAddress(){
var title = GET_TITLE_FROM_PARAMETER;
var content = GET_CONTENT_FROM_PARAMETER;
document.getElementById("title").innerHTML=title;
document.getElementById("content").innerHTML=content;
}
</script>
</head>
<body onload="codeAddress();">
<h1 id="title"></h1>
<div id="content"></div>
</body>
</html>
And of course, remove codeAddress from the first page as it's useless.
FYI, to get the parameters values, please check this answer.
Probably it is "old school" using alerts when learn or debug JS, but sometimes I decline to such approach. I am learning angularjs, and it is very difficult to understand scheduling, I mean step by step how angularjs is executing different directives.
As an instance, here small app in angularjs, and I can not understand why on one alert there are 5 messages???
http://plnkr.co/edit/8j7D0J0a6By447whhpa3?p=preview
<!doctype html>
<html>
<head>
<title></title>
<style>
.red
{
color:red;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="demoApp">
<div ng-controller="testCntr">
<span ng-class="{red: setClass()}">Test color</span>
<div>{{setClass()}}</div>
</div>
</body>
</html>
JS
demoApp = angular.module('demoApp',[]);
demoApp.controller('testCntr', function ($scope) {
$scope.setClass = function () {
alert('test');
return true;
}
});
The problem is that you're calling that function over and over again. Change it to be event driven and you'll be good:
http://plnkr.co/edit/zh0kIs?p=preview
html
<body ng-app="demoApp">
<div ng-controller="testCntr">
<span ng-class="{'red': changeClassModel}">Test color</span>
<br><br>
<button ng-click="setClass()">Hooray Alerts!</button>
</div>
</body>
js:
demoApp = angular.module('demoApp',[]);
demoApp.controller('testCntr', function ($scope) {
$scope.changeClassModel = false;
$scope.setClass = function () {
alert('test');
$scope.changeClassModel = true;
return true;
}
});
Ok I am probably doing something very silly that is preventing me from getting this to work, but here goes anyway:
I am trying to learn how to work with knockout and am trying to build a select list with options defined as an observable array. Here is the code:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="./knockout-3.0.0.js"></script>
<script type="text/javascript">
var viewModel = {
availableQuestions : ko.observableArray(['Who?', 'What?', 'When?'])
};
ko.applyBindings(viewModel);
</script>
<p>Questions to Ask: <select data-bind="options: availableQuestions"></select></p>
</body>
</html>
This is basically right out of one of their own examples but I cannot get it to work. The select list is not populated at all. I am using the latest version of Chrome (31.0.1650.57) and have looked in developer tools to see if there are issues. I have confirmed that everything is loading properly (ie: knockout is loading, the html is valid) still nothing. Am I missing something obvious?
here is the fiddle:
http://jsfiddle.net/janarde/r9pCK/
EDIT
Thanks to PW Kad It turned out to be that the DOM wasn't loaded before the binding:
EDIT
Thanks to Ek0nomik for pointing out the need to put knockout stuff after the markup.
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="./knockout-3.0.0.js"></script>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<p>Questions to Ask: <select data-bind="options: availableQuestions"></select></p>
<script type="text/javascript">
var viewModel = {
availableQuestions : ko.observableArray(['Who?', 'What?', 'When?'])
};
ko.applyBindings(viewModel);
</script>
</body>
</html>
You need to make sure you call applyBindings. Here is a working jsFiddle: http://jsfiddle.net/b4wHQ/
HTML
<p>Questions to Ask: <select data-bind="options: availableQuestions"></select></p>
Javascript
var viewModel = {
availableQuestions : ko.observableArray(['Who?', 'What?', 'When?'])
};
ko.applyBindings(viewModel);
Are you sure that the DOM is loaded before you are trying to apply bindings?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="./knockout-3.0.0.js"></script>
</head>
<body>
<p>Questions to Ask: <select data-bind="options: availableQuestions"></select></p>
<script type="text/javascript">
$( document ).ready(function() {
var viewModel = {
availableQuestions : ko.observableArray(['Who?', 'What?', 'When?'])
};
ko.applyBindings(viewModel);
});
</script>
</body>
</html>