I am new to AngularJS. Want to get values from 2 input text boxes, add them and then display them in a 3rd text box.
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.sum = ( $scope.a + $scope.b );
});
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form>
<input ng-model="a" type="number">
<input ng-model="b" type="number">
<input ng-model="sum" type="number">
</form>
</div>
</body>
</html>
You can achieve without creating any function just put value = {{a+b}} in you 3rd input tag
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.sum = ( $scope.a + $scope.b ); // this will assign value sum only when one time- when controller init happen and that time a and b both is undefined
});
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form>
<input ng-model="a" type="number">
<input ng-model="b" type="number">
<input value="{{a + b}}" type="number">
</form>
</div>
</body>
</html>
Use the ng-change directive:
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.a = $scope.b = $scope.sum = 0;
$scope.updateSum = function() {
$scope.sum = $scope.a + $scope.b;
};
});
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form>
A=<input ng-model="a" ng-change="updateSum()" type="number"><br>
B=<input ng-model="b" ng-change="updateSum()" type="number"><br><br>
Sum=<input ng-model="sum">
</form>
</div>
</body>
</html>
Related
I want to display error message in label on click if the textbox is empty or undefined using AngularJS.
I am very beginner into AngularJS.
Please help to solve this issue.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
</head>
<body ng-app="form">
<div ng-controller="formController">
<label>Name: <input type="text" ng-model="user.name" /></label><br />
<input type="submit" ng-click="update(user)" value="Save" />
<pre>{{master | json}}</pre>
</div>
<script>
angular.module('form', []).controller('formController', ['$scope', function ($scope) {
$scope.master = {};
$scope.update = function (user) {
debugger;
$scope.master = angular.copy(user);
if (user == undefined) {
debugger;
alert("Please enter text");
}
};
}]);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate ng-submit="Validate()">
<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span ng-show="ShowUserNameError">Username is required.</span>
</span>
</p>
</p>
<p>
<input type="submit" ng-click="Validate()">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.ShowUserNameError = false;
$scope.user = '';
$scope.email = '';
$scope.Validate = function(){
if(!$scope.user)
$scope.ShowUserNameError = true;
else
$scope.ShowUserNameError = false;
}
});
</script>
</body>
</html>
Enclose the input in a named form, name the input, and use ng-show:
<div ng-controller="formController">
<form name="form1">
<label>Name: <span ng-show="form1.item1.$error">{{form1.item1.$error}}</span>
<input name="item1" type="text" required ng-model="user.name" />
</label><br />
<input type="submit" ng-click="update(user)" value="Save" />
<pre>{{master | json}}</pre>
</form>
</div>
For more information, see
AngularJS <form> Directive API Reference - Example
AngularJS Developer Guide - Forms
Here is a small piece of code, where I am trying to render an HTML of my choice based on the "type" key of the json. Unfortunaltely, I don't see any error on executing the code nor am I getting the required HTML.
I am very new to Angular
<html>
<head>
<title></title>
</head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<body>
<script>
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
$scope.GenerateTable = function () {
$scope.Customers = [
{type:'email', name:'email',value:'',placeholder:"Your email here",required:true},
{type:'text', name:'password',value:'',placeholder:"Your password here",required:true},
{type:'number', name:'firstname',value:'',placeholder:"Your firstname here",required:false,min:"10",max:"100"},
];
$scope.IsVisible = true;
};
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<input type="button" value="Generate Table" ng-click="GenerateTable()" />
<hr />
<div ng-repeat="m in customers">
<div ng-switch="m.type">
<div ng-switch-when="text">
<h1>Hello</h1>
<p>Hello World.</p>
</div>
</div>
</div>
</div>
</body>
</html>
I hope it will help you.
<html>
<head>
<title></title>
</head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<script>
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
$scope.GenerateTable = function () {
$scope.Customers = [
{type:'email', name:'email',value:'',placeholder:"Your email here",required:true},
{type:'text', name:'password',value:'',placeholder:"Your password here",required:true},
{type:'number', name:'firstname',value:'',placeholder:"Your firstname here",required:false,min:"10",max:"100"},
];
$scope.IsVisible = true;
};
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<input type="button" value="Generate Table" ng-click="GenerateTable()" />
<hr />
<div ng-repeat="m in Customers">
<div><input type="{{m.type}}" value="{{m.Name}}" placeholder="{{m.placeholder}}" required="{{m.required}}" /></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html ng-app="">
<head>
<title>hello</title>
<script type="text/javascript" src="lib/angular.js"></script>
</head>
<body>
<input type="text" ng-model="name">
<p>{{name}} </p>
</html>
I try to do a very simple angular project, but there is something wrong. In the output page variables names appeared, not values as expected.
You need to have the module and controller declared, those two are missing with your code,
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
});
DEMO
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="name">
<p>{{name}} </p>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
});
</script>
</body>
</html>
Check sample angularjs code
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.name = "Hello";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<input type="text" ng-model="name">
<p>{{name}} </p>
</div>
</body>
I`m using Angualr for my web.
I have this part in html code:
<div class="form-group">
<div class="text-form" style="float: left;">Companion URL</div>
<input type="text" placeholder="Companion URL" class="companion-url-box" ng-model="newCreative.companionUrl">
</div>
I want to add method (in the Controller) that when the text change, it will add a new button down.
How can I do it? I can`t understand how ng-change works.
thanks
Simply use ng-if to check if newCreative.companionUrl exists in scope :
<div class="form-group">
<div class="text-form" style="float: left;">Companion URL</div>
<input type="text" placeholder="Companion URL" class="companion-url-box" ng-model="newCreative.companionUrl">
<input type="button" value="Click me" ng-if="newCreative.companionUrl">
</div>
You can also use a function to validate button visibility :
index.html
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="scripts.js"></script>
</head>
<body ng-controller="SampleController as ctrl">
<div class="form-group">
<div class="text-form" style="float: left;">Companion URL</div>
<input type="text" placeholder="Companion URL" class="companion-url-box" ng-model="newCreative.companionUrl">
<input type="button" value="Click me" ng-if="ctrl.isButtonAvailable()">
</div>
</body>
</html>
script.js
angular.module('app', []);
angular.module('app').controller('SampleController', function ($scope) {
var ctrl = this;
ctrl.isButtonAvailable = function() {
if(!$scope.newCreative) {
return false;
}
// Ensure companion url starts with https:// using a regular expression
return /^https:\/\//.test($scope.newCreative.companionUrl);
}
});
Working example
Check out this Plunker : https://plnkr.co/edit/n8VtJrenePGf9hCbmzWJ
You can use the directives ng-change on input and ng-if or ng-show on button, plus a little code on controller.
Check this:
http://codepen.io/mQuixaba/pen/oZqXWG?editors=1111
HTML:
<div ng-app="myApp" ng-controller="MyController">
<label for="input">Text:</label>
<input type="text" id="input" ng-model="text" ng-change="showButton=true"/>
<button ng-if="showButton" ng-click="hideButton()">My Button</button>
</div>
JS:
angular
.module('myApp', [])
.controller('MyController', function($scope){
$scope.showButton = false;
$scope.text = "My text";
$scope.hideButton = function() {
$scope.showButton = false;
}
});
Unable to focus on textbox on button click:
<html ng-app="CommonApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="HeadCtrl" ng-init='username=""'>
<input id="UserName" type="text" class="login_boxdecor" ng-model="username" />
<div class="login_btn_outer">
<div class="login_btn_outer2" ng-click="cLgn();">
<a class="btn">Login</a>
</div>
</div>
</body>
</html>
var myApp = angular.module('CommonApp', []);
myApp.controller('HeadCtrl', function($scope){
$scope.cLgn= function(){
if($scope.username.trim().length==0)
{
//Here How to focus my textbox
}
};
});
<html ng-app="CommonApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="HeadCtrl" ng-init='username=""'>
<input id="UserName" type="text" class="login_boxdecor" ng-model="username" />
<div class="login_btn_outer">
<div class="login_btn_outer2" ng-click="cLgn();">
<a class="btn">Login</a>
</div>
</div>
</body>
</html>
var myApp = angular.module('CommonApp', []);
myApp.controller('HeadCtrl', function($scope){
$scope.cLgn= function(){
if($scope.username.trim().length==0)
{
document.getElementById("UserName").focus();
}
};
});
You can use angular.element to select your input box and can call focus(). Try something similar to below::
<html ng-app="CommonApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="HeadCtrl" ng-init='username=""'>
<input id="UserName" type="text" class="login_boxdecor" ng-model="username"/>
<div class="login_btn_outer">
<div class="login_btn_outer2" ng-click="cLgn();">
<a class="btn">Login</a>
</div>
</div>
</body>
</html>
var myApp = angular.module('CommonApp', []);
myApp.controller('HeadCtrl', function($scope){
$scope.focusText =false;
$scope.cLgn= function(){
if($scope.username.trim().length==0)
{
angular.element("#UserName").focus();
}
};
});