Angular JS: placeholders not getting resolved - javascript

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>

Related

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.

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

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.

ngMessage not working in AngularJs

I am making a simple validation of required, but unable to find ng-Message working on wrong entry or on clicking submit. Can someone help me out where am I wrong?
HTML:
<html>
<head>
<!-- Script Files -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<form name="form1" id="form1" novalidate>
<input type="text" name="age" ng-minlength="3" required/>
<div ng-messages="form1.age.$error" ng-show="(form1.age.$error.required || form1.age.$error.minlength) && (form1.age.$touched || form1.$submitted) " >
<div ng-message="required">This is required</div>
<div ng-message="minlength">Length is too less</div>
</div>
<a data-ng-click="submit(form1.$invalid)">Click</a>
</form>
<script>
//module declaration
var app = angular.module('myApp', ['ngMessages']);
//controller declaration
app.controller('myCtrl', function($scope) {
var submit = function(invalid){
if(invalid) return;
}
});
</script>
</body>
</html>
Your age input has no ng-model. Validation alá minlength only works if ng-model is present:
<input type="text" name="age" ng-model="age" ng-minlength="3" required/>
This is due to how validators work. You'll notice ng-model is not set, when $valid is false. There's always a hint in the docs as well: https://docs.angularjs.org/api/ng/directive/ngMinlength
Also ng-model doesn't need to be the same as the field name.

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

Receive an error in console when submit the form with two similar consecuative values using angularJS

I am trying to append the form submit using Angular but I receive an error when I submit more than one consecutive similar values. For example if I submit "John" and then try to submit another "John" the program crashes. Can someone explain it to me? and a tip how to fix it?
*Also can anyone tell me how to append the results in one line?
angular.module("displayText", [])
.controller("submitText", function($scope) {
$scope.outputArr = [];
$scope.print = function() {
$scope.outputArr.push($scope.inputText);
$scope.inputText = '';
};
});
<html ng-app="displayText">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<body ng-controller="submitText">
<div>
<form method="get">
<input type="text" name="post" ng-model="inputText" required/>
<button ng-click="print(inputText)">Submit</button>
</form>
<div id="page">
<p ng-repeat="text in outputArr">{{text}}</p>
</div>
</div>
</body>
</html>
ng-repeat can't handle duplicate values.
you have to change
<p ng-repeat="text in outputArr">{{text}}</p>
to
<p ng-repeat="text in outputArr track by $index">{{text}}</p>
and the <p> element to <span> for one line visualization.
<span ng-repeat="text in outputArr track by $index">{{text}} </span>
Here is the simpliest solution to your problem:
angular.module("displayText", [])
.controller("submitText", function($scope) {
$scope.outputArr = [];
$scope.print = function() {
$scope.outputArr.push($scope.inputText);
$scope.inputText = '';
};
});
<html ng-app="displayText">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<body ng-controller="submitText">
<div>
<form method="get">
<input type="text" name="post" ng-model="inputText" required/>
<button ng-click="print(inputText)">Submit</button>
</form>
<div id="page">
<span ng-repeat="text in outputArr track by $index">{{text}} </span>
</div>
</div>
</body>
</html>
Or you can wrap your item value into an object
angular.module("displayText", [])
.controller("submitText", function($scope) {
$scope.outputArr = [];
$scope.print = function() {
$scope.outputArr.push({
text : $scope.inputText
});
};
});
<html ng-app="displayText">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<body ng-controller="submitText">
<div>
<form method="get">
<input type="text" name="post" ng-model="inputText">
<button ng-click="print(inputText)">Submit</button>
</form>
<div id="page">
<p ng-repeat="entry in outputArr">{{entry.text}}</p>
</div>
</div>
</body>
</html>

Categories