Get value using ng-model with append - Javascript - 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

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.

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>

How to get Angularjs Hidden field value without any button action?

I want get the angularjs hidden field value without any button action. I'm new in angularjs if any link available for this solution please send to me
Code given below
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="TestController">
<input type="hidden" name="id" ng-model="id" ng-init="id=12"></input>
</div>
<script>
function TestController($scope) {
alert($scope.id);
}
</script>
Problem is, in controller alert is invoked before ng-init get set,
try this,
app.controller('myController', function($scope,$timeout) {
$timeout(function() {
alert($scope.id);
})
});
DEMO
It seems that the problem is that the alert(...) call is executed before the id variable is initialized.
This seems to work
function TestController($scope, $timeout) {
$timeout(function(){alert($scope.id);},0, true);
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="TestController">
<input type="hidden" name="id" ng-model="id" ng-init="id=12">
</div>
You can create init function and observe via $watch
function TestController($scope) {
this.init = function() {
$scope.id = 12;
$scope.$watch('id', function(value, oldValue) {
console.log('changed', $scope.id)
});
console.log('id has been initialized');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-init="vm.init()" ng-controller="TestController as vm">
<input type="hidden" name="id" ng-model="id">
<input type="text" placeholder="just test input" name="other" ng-model="id">
</div>

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>

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