Why the expression is appearing as it is in AngularJS example? - javascript

I've following code :
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<p>Try to change the names.</p>
<div ng-app="myApp">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
</body>
</html>
The output of above code in a browser is as below :
Full Name: {{firstName + " " + lastName}}
My question is why the expressions are appearing as it is?

You did not register the angular module where the angualr bootstraps from this starting point.
<script>
angular.module("myApp",[])
</script>
And initialize with this module to the ng-app directive.
<div ng-app="myApp">
</div>

Since you've not define a angular app named myApp, you have to define the ng-app directive without any value.
ng-app="myApp" should be ng-app
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<p>Try to change the names.</p>
<div ng-app>
First Name:
<input type="text" ng-model="firstName">
<br>Last Name:
<input type="text" ng-model="lastName">
<br>
<br>Full Name: {{firstName + " " + lastName}}
</div>
</body>
</html>
If you need to have a separate angular module, You can do like below
var app = angular.module("myApp", []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<p>Try to change the names.</p>
<div ng-app="myApp">
First Name:
<input type="text" ng-model="firstName">
<br>Last Name:
<input type="text" ng-model="lastName">
<br>
<br>Full Name: {{firstName + " " + lastName}}
</div>
</body>
</html>

You have not defined any controller in the ejs file.
add ng-controller along with ng-app and define that controller in your angular app.
<div ng-app="myApp" ng-controller="myCtrl">
Define Controller in the angular App like this:
var app = angular.module("myApp",[]);
app.controller('myCtrl',function($scope){
...
});
Hope this helps you.

Related

Javascript alert not displaying correctly

Does anyone know how can I resolve the following: I want the form input by the user, to be alerted in a different HTML file.
This is what I wrote so far. It works for the id called 'name', but I dont know why it does not for the 'position'.
"index.html" file:
<script>
function myFunction() {
name = document.getElementById("name").value;
position = document.getElementById("position").value;
window.location.replace("signature.html");
return false;
}
</script>
<form class="formulario" onsubmit="return myFunction()">
Name: <input type="text" name="name" id="name"><br>
Position: <input type="text" name="position" id="position"><br>
<br>
<input type="submit" value="Generate Signature">
</form>
"signature.html" file - notice the alert(name) and the alert(position) => the alert(name) works, but not the alert(position). I want to understand how to fix that please.
<html>
<head>
</head>
<body>
<div class="signature_general">
<div class = "signature_middle">
<div id = "signature_details">
<font size="2px">Regards,</font><br>
<b><font color="#808080" size="3px" id="nameInput">Francisco Jurado</font></b><br>
<font size="2px" id="posInput">Accounting Systems Team Leader</font>
</div>
</div>
</div>
<script>
alert(name);
alert(position);
</script>
</body>
</html>
Thanks very much
Edit: I have noticed that I am getting an error, in which "position" is "undefined". Does anyone knows?
You can change your html file as:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form class="formulario" action="signature.html" method="get">
Name: <input type="text" name="name" id="name"><br>
Position: <input type="text" name="position" id="position"><br>
<br>
<input type="submit" value="Generate Signature">
</form>
</body>
</html>
And your signature.html file as :
<html>
<head>
</head>
<body>
<div class="signature_general">
<div class = "signature_middle">
<div id = "signature_details">
<font size="2px">Regards,</font><br>
<b><font color="#808080" size="3px" id="nameInput">Francisco Jurado</font></b><br>
<font size="2px" id="posInput">Accounting Systems Team Leader</font>
</div>
</div>
</div>
<script>
var values = window.location.search.substring(1).split('&')
var name = values[0].split('=')[1]
var position = values[1].split('=')[1]
alert(name)
alert(position)
</script>
</body>
</html>
That name you are setting in index.html is not the same name you are printing in the alert of signature.html.
You can see this by renaming name to name2 in both places.
If you want to pass those variables from one page to another, I suggest using query strings how to exchange variables between two HTML pages?

Angular JS form validation in "myApp" application.

I am new to AngularJS and try to implement form validation in "myApp" app.
I wrote the code below. The {{result}} should output "true"/"false". But it didn't work.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<form name = "myForm">
<p>Input the field: </p>
<input type = "text" name="myInput" ng-model = "myInput" required>
</form>
<p> The result:</p>
<p>{{result}}</p>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope){
$scope.result = myForm.myInput.$valid;
});
</script>
</body>
This must be correct code for your problem.
If you "watch" the changes in the "input field" then $valid result will generate.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="MyController">
<form name='myForm' novalidate>
<p>Input the field: </p>
<input type='text' ng-model='model.name' name='myInput' required/>
</form>
<p> The result:</p>
<p>{{myForm.myInput.$valid}}</p>
<script>
var app = angular.module('myApp', []);
app.controller('MyController',['$scope',function($scope) {
$scope.$watch('myForm.myInput.$valid',function(newValue,oldvalue) {
if(newValue) {
//do anything with new value
}
});
}]);
</script>
</body>
</html>
Hope this will be helpful to you.
As a new User to angularJS your approcach is some how correct in form validation.In future you will learn new vesions in angular and several validation methodologies.
following code line is the way that how we can check valid input in angularJS.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="">
<p>Try writing in the input field:</p>
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
</body>
</html>
Your approach is correct.Keep it up and it will be great if you can define correct question clearly. :)
Cheers.

Angular JS: placeholders not getting resolved

My angular js code is not resolving the placeholders ,while I am trying to get it resolved on runtime.
Js code :
var message ={s:"hello {{name}}"};
angular.module("myapp",[]).controller("myctrl", function($scope){
var ctrl=this;
$scope.name="david";
$scope.w=message.s;
$scope.call=function(){
//alert(message);
};
});
HTML :
<div ng-app="myapp">
<div ng-controller="myctrl as ctrl">
{{w}}
<input type="text" ng-model="ctrl.name" />
<input type="submit" ng-click="call();" />
</div>
</div>
Expected output is :hello david;
Attaching fiddle link :https://jsfiddle.net/rakotkar/o46coezd/2/
You are mixing up controller as syntax and $scope. When you are using controller as syntax , you have to use this keyword instead of $scope.
JS
var message ={s:"hello "};
angular.module("myapp",[]).controller("myctrl",function(){
var ctrl = this;
ctrl.name ="david";
ctrl.w = message.s;
ctrl.call = function(){
//alert(message);
};
});
HTML:
<div ng-app="myapp">
<div ng-controller="myctrl as ctrl">
{{ctrl.w}}{{ctrl.name}}
<input type="text" ng-model="ctrl.name" />
<input type="submit" ng-click="call();" />
</div>
</div>
Demo:https://jsfiddle.net/o46coezd/4/
For more info on controller as syntax:AngularJs "controller as" syntax - clarification?
You can try like below. As you're trying to access scope from outside module, it's not possible I think.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<body>
<div ng-app="myapp">
<div ng-controller="myctrl as ctrl">
{{w}}
<input type="text" ng-model="ctrl.name"/>
<input type="submit" ng-click="call();"/>
</div>
</div>
<script>
var message ={s:"hello"};
angular.module("myapp",[]).controller("myctrl", function($scope){
var ctrl=this;
$scope.text = message;
$scope.name="david";
$scope.w= $scope.text.s + ' ' + $scope.name;
$scope.call=function(){
//alert(message);
};
});
</script>
</body>
</html>

Get value using ng-model with append - Javascript

Upon pressing add button in myform, I want to get the value in the input Name using ng-model. I am using append in my form to add the next column.
However, I am facing issues in achieving this through the code below
function add(){
var stre;
stre="Name: <input type='text' ng-model='Name'><br>"
+"Result Name: <input type='text' value={{Name}}>"
$("#test").append(stre);
}
<!DOCTYPE html>
<html ng-app>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>
<div id="test">
<button type="button" onclick="add()">add</button><br>
</div>
</body>
</html>
Use ng-repeat instead of append
The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item.
var myApp = angular.module('myApp', []);
myApp.controller('myController', myController);
function myController($scope) {
$scope.elements = [];
$scope.add = function() {
$scope.elements.push({});
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller='myController'>
<div id="test">
<div ng-repeat='elem in elements'>
Name:
<input type='text' ng-model='elem.name'>
<br>Result Name:
<input type='text' value={{elem.name}}>
<hr>
</div>
<button type="button" ng-click="add()">add</button>
</div>
</div>
</div>
Fiddle here

Why isn't the submit button working?

I have written this code testing out the $scope feature as I have just started learning AngularJS. However, whenever I click the submit button, nothing happens.
This is my JS file below.
var app = angular.module('permissions', []);
app.controller('testAppCtrl', ['$scope', function testAppCtrl($scope) {
'use strict';
$scope.details = {
itemId: "",
userID: ""
};
$scope.register = function () {
console.log('User clicked change', details.itemId);
};
$scope.fullDetails = function () {
return details.itemId + " " + details.userId;
};
}]);
This is my PHP file below.
<script type="text/javascript" src="include/js/angular-permission-test.js"></script>
<div id="myForm">
<form name="myForm" action="" ng-app="permissions" ng-submit="register()">
<h1>Test</h1>
<body ng-controller="testAppCtrl">
ItemId: <input type="text" ng-model="details.itemId"> {{details.itemId}}<br><br>
UserId: <input type="text" ng-model="details.userId"> {{details.userId}}<br><br>
<input name="submitBtn" type="submit" value="Change" ng-click="register()">
{{ fullDetails() }}
</body>
</form>
</div>
I can't seem to find the problem in the code. I have tried many solutions but none have had any apparent effect on it.
Also, any improvements to the code will be appreciated.
Thanks in advance.
The problem I think is with the structure of your HTML. Because angular scope is resolved from the HTML elements parent child hierarchy.
Your testAppCtrl is in body (which is inside your form), the register() function is inside the scope of testAppCtrl (but you are trying to access it outside the body). So, you cannot access it from outside in hierarchy. Keep the Body outside and form inside. Also the ng-app should be at the same or higher level of your ng-controller. Because you can bind your controllers to the app/module and not the reverse.
So, the code should be something like this,
<body ng-app="permissions" ng-controller="testAppCtrl">
<div id="myForm">
<form name="myForm" action="" ng-submit="register()">
<h1>Test</h1>
ItemId: <input type="text" ng-model="details.itemId"> {{details.itemId}}<br><br>
UserId: <input type="text" ng-model="details.userId"> {{details.userId}}<br><br>
<input name="submitBtn" type="submit" value="Change" ng-click="register()">
{{ fullDetails() }}
</form>
</div>
</body>
Couple of things I noticed. ng-app should be declared inside ng-controller.
you are returning plain variables instead of the scope variables.
Anyway, here's the fix.
var app = angular.module('permissions', []);
app.controller('testAppCtrl', ['$scope',
function testAppCtrl($scope) {
'use strict';
$scope.details = {
itemId: "",
userID: ""
};
$scope.register = function() {
console.log('User clicked change', $scope.details.itemId);
};
$scope.fullDetails = function() {
return $scope.details.itemId + " " + $scope.details.userId;
};
}
]);
<!DOCTYPE html>
<html ng-app="permissions">
<head>
<script data-require="angular.js#1.3.13" data-semver="1.3.13" src="https://code.angularjs.org/1.3.13/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="testAppCtrl">
<div id="myForm">
<form name="myForm" ng-submit="register()">
<h1>Test</h1> ItemId:
<input type="text" ng-model="details.itemId" />{{details.itemId}}
<br />
<br />UserId:
<input type="text" ng-model="details.userId" />{{details.userId}}
<br />
<br />
<input name="submitBtn" type="submit" />{{ fullDetails() }}
</form>
</div>
</body>
</html>

Categories