i need to show total amount. first and second text box value sum should be display in total text box. have any way to do it.
<input type="text" ng-model="add.amount1"/>
<input type="text" ng-model="add.amount2"/>
Total <input type="text" ng-model={{add.amount1+add.amount2}}/>
You need to have a ng-change on text boxes and call a function to calculate the sum.
DEMO
var app = angular.module('testApp',[]);
app.controller('testCtrl',function($scope){
$scope.add = {};
$scope.add.amount1 = 0;
$scope.add.amount2 = 0;
$scope.calculateSum = function(){
$scope.sum = parseInt($scope.add.amount1) + parseInt($scope.add.amount2);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<input type="text" ng-change="calculateSum()" ng-model="add.amount1"/>
<input type="text" ng-change="calculateSum()" ng-model="add.amount2"/>
Total <input type="text" ng-model="sum"/>
</body>
I hope this can also be considered
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
$scope.add = {};
$scope.add.amount1 = 1;
$scope.add.amount2 = 2;
$scope.sum = function(add) {
return +add.amount1 + +add.amount2;
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app='myApp'>
<div ng-controller='myCtrl'>
<input type="text" ng-model="add.amount1"/>
<input type="text" ng-model="add.amount2"/>
Total <input type="text" value="{{sum(add)}}" />
</div>
</body>
</html>
Related
I need to set max value for input field as 250 or 500 based on condition.
I have a ng-modal {{info.temp}} which contains value 1 or 0.
Based on this, if value is 1 the max number that can be entered in text box is 250 or else 500.
Please let me know how to write this logic in angularjs in HTML
Please add some code examples. set condition to the number field use ng-max directive .
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="form1">
condition input: <input type="text" ng-init="condition=1" ng-model="condition" /> <br/> final input: <input name="result" type="number" ng-max="condition == '0' ? 250 : 500" ng-model="result" /> {{result }} <span ng-show="form1.result.$invalid"> Final input not valid</span>
</form>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
});
</script>
</body>
</html>
run this code and you should change temp with edit and run again :
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="form">
<label for="maxlength">Set a Info.Temp 0 or 1 : </label>
<input type="number" ng-model="info.temp" id="maxlength" />
<br>
<label for="input">This input is restricted by the current Info.temp 1 = 250 and 0 = 500 char : </label>
<input type="text" ng-model="name" id="input" name="input" ng-maxlength="info.temp ? 250 : 500" /><br>
<hr>
input valid? = <code>{{form.input.$valid}}</code><br>
model = <code>{{name}}</code>
</form>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "";
$scope.info = { temp : 1};
});
</script>
</body>
</html>
I'm new to AngularJS and I am doing some tutorials to get in touch with it. While I'm doing the tutorials I have modified the code a bit to get a better feeling of what's behind. My code consists of two parts, which have nothing to do with each other.
The first one is a simple user input and based on that a list gets filtered. This is working fine.
However, in the second part I was trying to implement a simple adding function where the user can give an input and based on that the sum of two numbers is calculated. This part is not working at all. The numbers are being recognised as strings. The code is basically from this source here. When I copy the whole code and run it, it works fine, but when I modify it a bit it doesn't.
I want to understand why my code isn't working. To me there is nearly no difference. So I think that I eventually misunderstood the concept of angularjs. But I can't figure out where the error could be.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript">
function TodoCtrl($scope) {
$scope.total = function () {
return $scope.x + $scope.y;
};
}
</script>
</head>
<body data-ng-app>
<input type="text" ng-model="name">{{name}}
<div data-ng-init="Names=['Arthur', 'Bob', 'Chris', 'David', 'EDGAR']">
<ul>
<li data-ng-repeat="naming in Names | filter: name ">{{naming}}</li>
</ul>
</div>
<div data-ng-controller="TodoCtrl">
<form>
<input type="text" ng-model ="x">{{x}}
<input type="text" ng-model ="y"> {{y}}
<input type="text" value="{{total()}}"/>
<p type= "text" value="{{total()}}">value</p>
</form>
</div>
</body>
</html>
Several things to change...
First you need to create a module:
var app = angular.module("myApp", []);
Then you need to define a module e.g. myApp on the ng-app directive.
<body data-ng-app="myApp">
Then you need to add TodoCtrl to the module:
app.controller("TodoCtrl", TodoCtrl);
Also check that both $scope.x and $scope.y have values, and make sure that they are both parsed as integers, otherwise you will get string concatenation ("1"+"1"="11") instead of addition (1+1=2)!
$scope.total = function () {
return ($scope.x && $scope.y)
? parseInt($scope.x) + parseInt($scope.y)
: 0;
};
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript">
(function(){
var app = angular.module("myApp", []);
app.controller("TodoCtrl", TodoCtrl);
function TodoCtrl($scope) {
$scope.total = function () {
return ($scope.x && $scope.y)
? parseInt($scope.x) + parseInt($scope.y)
: 0;
};
}
}());
</script>
</head>
<body data-ng-app="myApp">
<input type="text" ng-model="name">{{name}}
<div data-ng-init="Names=['Arthur', 'Bob', 'Chris', 'David', 'EDGAR']">
<ul>
<li data-ng-repeat="naming in Names | filter: name ">{{naming}}</li>
</ul>
</div>
<div data-ng-controller="TodoCtrl">
<form>
<input type="text" ng-model ="x">{{x}}
<input type="text" ng-model ="y"> {{y}}
<input type="text" value="{{total()}}"/>
<p type= "text" value="{{total()}}">value</p>
</form>
</div>
</body>
</html>
As mentioned in the above two answers adding TodoCtrl as controller instead function will make the snippet work.
REASON:
Angularjs framework above 1.3 does not support global function which means declaring controller as function wont work.
In your code snippet, you are using angular version 1.5, which needs the controller to be defined.
DEMO
angular.module("app",[])
.controller("TodoCtrl",function($scope){
$scope.x = 0;
$scope.y = 0;
$scope.total = function () {
return parseInt($scope.x) + parseInt($scope.y)
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" >
<input type="text" ng-model="name">{{name}}
<div data-ng-init="Names=['Arthur', 'Bob', 'Chris', 'David', 'EDGAR']">
<ul>
<li data-ng-repeat="naming in Names | filter: name ">{{naming}}</li>
</ul>
</div>
<div data-ng-controller="TodoCtrl">
<form>
<input type="text" ng-model ="x">{{x}}
<input type="text" ng-model ="y"> {{y}}
<input type="text" value="{{total()}}"/>
<p type= "text" value="{{total()}}">value</p>
</form>
</div>
</div>
you need to define the TodoCtrl as controller instead function
.controller("TodoCtrl",function($scope){
$scope.x = 0;
$scope.y = 0;
$scope.total = function () {
return parseInt($scope.x) + parseInt($scope.y)
};
})
Demo
angular.module("app",[])
.controller("TodoCtrl",function($scope){
$scope.x = 0;
$scope.y = 0;
$scope.total = function () {
return parseInt($scope.x) + parseInt($scope.y)
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" >
<input type="text" ng-model="name">{{name}}
<div data-ng-init="Names=['Arthur', 'Bob', 'Chris', 'David', 'EDGAR']">
<ul>
<li data-ng-repeat="naming in Names | filter: name ">{{naming}}</li>
</ul>
</div>
<div data-ng-controller="TodoCtrl">
<form>
<input type="text" ng-model ="x">{{x}}
<input type="text" ng-model ="y"> {{y}}
<input type="text" value="{{total()}}"/>
<p type= "text" value="{{total()}}">value</p>
</form>
</div>
</div>
If I add a row with Dynamic Angular JS variable, it is not working.
Below is my code. Please help me let know the issue.
Also please note that the inner HTML in my original code is 600 lines long. In this example I have used simple div to simplify.
<div data-ng-init="quantity_r=1;price_r=5">
<h2>Cost Calculator Quantity:</h2>
<input type="number" ng-model="quantity_r"> Price: <input type="number" ng-model="price_r">
<div>
Total in dollar: {{quantity_r * price_r}}
</div>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {
});
</script>
<script>
var app = angular.module('myApp1', []);
app.controller('AppCtrl', function($scope) {
angular.module('ngAppDemo', []).controller('ngAppDemoController', function($scope) {
$scope.a = 1;
$scope.b = 2;
});
});
function replicateRegion() {
var table = document.getElementById("idTable");
var lastRow = table.rows.length;
var row = table.insertRow(lastRow);
var cell1 = row.insertCell(0);
var sHTML =document.getElementById("idTableTD1").innerHTML;
sHTML=sHTML.replace("_r", "_r" + lastRow.toString());
sHTML=sHTML.replace("Cost Calculator Quantity:", "Cost Calculator Quantity: Row Added " + lastRow.toString());
cell1.innerHTML = sHTML;
}
</script>
<div id="id1" ng-app="myApp" ng-controller="AppCtrl">
<button onclick="replicateRegion()">insert Row</button>
<table id="idTable">
<tr><td id="idTableTD1">
<div data-ng-init="quantity_r=1;price_r=5">
<h2>Cost Calculator Quantity:</h2>
<input type="number" ng-model="quantity_r"> Price: <input type="number" ng-model="price_r">
<div>
Total in dollar: {{quantity_r * price_r}}
</div>
</td></tr>
</table>
</div>
</body>
</html>
Only the first row which is static has the correct output. The rows added after button-click "Insert Row" have the problematic Angular JS output. Please help.
You need to add the code for replicateRegion() function inside the AngularJS controller and use the $compile service to bind the dynamically generated HTML into the AngularJS DOM.
var myapp = angular.module('myApp', []);
myapp.controller('AppCtrl', function ($compile, $scope) {
$scope.a = 1;
$scope.b = 2;
$scope.replicateRegion = function(){
var table = document.getElementById("idTable");
var lastRow = table.rows.length;
var row = table.insertRow(lastRow);
var template = `<div data-ng-init="quantity_r=1;price_r=5">
<h2>Cost Calculator Quantity:</h2>
<input type="number" ng-model="quantity_r"> Price: <input type="number" ng-model="price_r">
<div>
Total in dollar: {{quantity_r * price_r}}
</div>
</div>`;
var cell1 = row.insertCell(0);
template=template.replace(/_r/g, "_r" + lastRow.toString());
template=template.replace("Cost Calculator Quantity:", "Cost Calculator Quantity: Row Added " + lastRow.toString());
cell1.innerHTML = template;
$compile(cell1)($scope); //Now compile it to render the directive.
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="id1" ng-app="myApp" ng-controller="AppCtrl">
<button ng-click="replicateRegion()">insert Row</button>
<table id="idTable">
<tr><td id="idTableTD1">
<div data-ng-init="quantity_r=1;price_r=5">
<h2>Cost Calculator Quantity:</h2>
<input type="number" ng-model="quantity_r"> Price: <input type="number" ng-model="price_r">
<div>
Total in dollar: {{quantity_r * price_r}}
</div>
</div>
</td></tr>
</table>
</div>
Also notice that var template that specifies a generic template that should be inserted in the HTML dynamically on click. It is always a good practice to specify a static HTML template instead of extracting the generated HTML from the page and using that, which you have done.
When you add markup manually, like
document.getElementById('idTableTD1').innerHTML= '<div dynamic></div>'
you are bypassing all AngularJS code. You should do it rather as this:
angular.element("#idTableTD1").html('<div dynamic></div>');
may be this will help.
Need to show error message whenever i enter space in password input field using ng-pattern.
Use of regEx - /^\S*$/ does not allow space anywhere in the string.
<form name="myForm">
<input type='password' name="passInpt" ng-model='pass' data-ng-pattern="/^\S*$/">
<div data-ng-show="myForm.passInpt.$error.pattern" >White Space not allowed</div>
</form>
DEMO:
var app = angular.module("app", []);
app.controller("ctrl", function($scope) {});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="ctrl">
<form name="myForm">
<input type='password' name="passInpt" ng-model='pass' data-ng-pattern="/^\S*$/">
<div data-ng-show="myForm.passInpt.$error.pattern">White Space not allowed</div>
</form>
</body>
Here is the link Jsfiddle demo
You can check for indexof or you can use regX for it.
HTML
<div ng-app="myApp">
<div ng-controller="ctrl">
<form>
<span>{{error}}</span>
<input type='password' ng-model='pass' ng-change='check()'>
</form>
</div>
</div>
**JS **
var app = angular.module('myApp', []);
app.controller('ctrl', function($scope) {
$scope.error = '';
$scope.check = function() {
$scope.pass.indexOf(' ') > -1 ? ($scope.error = 'Invalid') : ($scope.error = '');
}
})
Hope this will help you
updated for space
Im quite new with angular. What am i freaky about is that following code is showing empty buttons (edit/delete) even if it looks empty (on start) :
<!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="todoCtrl">
<h2>todo</h2>
<form ng-submit="todoAdd(item)">
<input type="text" ng-model="todoInput" size="50" placeholder="Add New">
<input type="submit" value="Add New">
</form>
<br>
<div ng-repeat="x in todoList">
<span ng-bind="x.todoText"></span><button id="#edit" ng-click="edit(item)">edit</button><button ng-click="remove(item)">delete</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('todoCtrl', function($scope) {
$scope.todoList = [{}];
$scope.todoAdd = function(item) {
$scope.todoList.push({todoText:$scope.todoInput);
$scope.todoInput = "";
};
$scope.remove = function(item) {
var index = $scope.todoList.indexOf(item);
$scope.todoList.splice(index, 1);
};
$scope.edit = function(item) {
//function
};
});
</script>
</body>
</html>
And also can somebody to help me after clicking on edit to push todoText to input and change caption of addnew to save? and afterthen change it to addNew again?
Thank you very much
Replace line
$scope.todoList = [{}];
to
$scope.todoList = [];
Then, it wouldn't show you empty line.
//Full code.
<!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="todoCtrl">
<h2>todo</h2>
<form>
<input type="text" ng-model="todoInput" size="50" placeholder="Add New">
<input type="button" value="{{actionName}}" ng-click="todoAdd()" />
</form>
<br>
<div ng-repeat="x in todoList">
<span>{{x.todoText}}</span><button id="#edit" ng-click="edit(x)">edit</button><button ng-click="remove(item)">delete</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('todoCtrl', function($scope) {
$scope.todoList = [];
$scope.actionName = 'Add';
$scope.todoAdd = function() {
if($scope.actionName === 'Add'){
$scope.todoList.push({todoText:$scope.todoInput});
$scope.todoInput = "";
} else {
var index = $scope.todoList.indexOf($scope.temp);
console.log('index: ' + index);
$scope.todoList.splice(index, 1, {todoText:$scope.todoInput});
$scope.actionName = 'Add';
}
};
$scope.remove = function(item) {
var index = $scope.todoList.indexOf(item);
$scope.todoList.splice(index, 1);
};
$scope.edit = function(item) {
$scope.todoInput=item.todoText;
$scope.temp = item;
$scope.actionName = 'Save';
};
});
</script>
</body>
</html>