I'm an Angular.js noob and I want to multiply two values get that sum of those values and then multiply the sum buy another value.
I want to input a value:
<input type="text" ng-model="averageSalary">
then get that result, then be able to enter another value:
<input class="input input-sm" type="text" ng-model="benefitsAt">
get the the sum of those to values and multiply that by:
<input class=" input input-sm" type="text" ng-model="occupancy">
I hope this helps, I tried to explain it the best that I could
You just need to add something that outputs the display:
<span>{{(averageSalary + benefitsAt) * occupancy}}</span>
You can or the result with zero to eliminate displaying null when the user hasn't entered anything:
<span>{{(averageSalary + benefitsAt) * occupancy || 0}}</span>
HTML ...
<div ng-app="myapp" ng-controller="MyController">
<form>
<input type="text" ng-model="averageSalary">
<input class="input input-sm" type="text" ng-model="benefitsAt">
<input class=" input input-sm" type="text" ng-model="occupancy">
</form>
<span ng-bind="getMySum()"></span>
</div>
CONTROLLER ...
angular.module("myapp").controller('MyController', ['$scope', function($scope) {
$scope.getMySum = function() {
return $scope.averageSalary * $scope.benefitsAt * $scope.occupancy;
};
}]);
I havent tested this code - and I would use the Controller As sytax - but this seems pretty much what you want
This code below should work and run for you.
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.averageSalary = 55000;
$scope.benefitsAt = .02;
$scope.$watch('averageSalary + benefitsAt', function() {
$scope.occupancy = $scope.averageSalary * $scope.benefitsAt;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
Average Salary
<input type="text" ng-model="averageSalary"><br/>
Benefits
<input class="input input-sm" type="text" ng-model="benefitsAt"><br/>
Occupancy
<input class=" input input-sm" type="text" ng-model="occupancy"><br/>
</div>
Related
I am trying to add a dropdown list with "Others" option. If user select "Others", Others (Please specify) input box will become Mandatory. How should I validate this case? Right now I added Javascirpt code to valid this. Is there anyway to do this like "Please specify other reason."?
<form name="myForm">
<div ng-app="myApp" ng-controller="myCtrl">
Reason : <select ng-model="reason" ng-options="x for x in names" required></select> <span ng-show="myForm.reason.untouched">The reason is required.</span>
<p>Others (specify): <input type="text" ng-model="others"></p>
</div>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["reason1", "reason2", "reason3","Others"];
$scope.addItem = function () {
if ($scope.reason == "Others" && !$scope.others)
{
window.alert("Please specify others");
}
if($scope.others && $scope.reason!='Others')
{
window.alert("Please select reason others");
}
});
</script>
Angular has an ng-required property that allows you to set it conditionally.
<form name="myForm">
<div ng-app="myApp" ng-controller="myCtrl">
Reason : <select ng-model="reason" ng-options="x for x in names" required>
</select> <span ng-show="myForm.reason.untouched">The reason is required.
</span>
<p>Others (specify): <input type="text" ng-model="others" ng-required="reason == 'Others'"></p>
</div>
</form>
I've built a shopping cart for a training site. People can purchase a number of 'seats' for each training session. What I need to add is a form requiring the name and email for each seat(attendee). So if someone purchases 3 seats, then I will need to generate form fields for each attendee.
I'm assuming there's something in the following code that plays a part in solving this problem but I'm not skilled enough in Angular to work it out.
ng-repeat="i in quantity track by $index"
look at this codepen
it works fine :)
var app = angular.module('myapp',[]);
app.controller('ctrlParent',function($scope){
$scope.myNumber=1;
$scope.range = function(count){
var output = [];
for (var i = 0; i < count; i++) {
output.push(i)
};
return output;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
<div ng-controller="ctrlParent">
<input ng-model="myNumber" type="text" placeholder="Quantity"/>
<form ng-repeat="i in range(myNumber) track by $index">
<input type="text" placeholder="Name"/>
<input type="text" placeholder="Name"/>
<input type="text" placeholder="Name"/>
<input type="button" value="Ok"/>
</form>
</div>
</div>
First, get the number of seats, in the form (send the seats number by events OR shared service if the form are in another angular controller) So, let say $scope.nbrSeats (initial value = 0) in forms controller.
Second, using ng-repeat :
<form ng-repeat="i in nbrSeats">...</form>
Here is a working example for you:
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.quantity = '1';
$scope.availableQuantity = '10';
$scope.range = function(num) {
num = parseInt(num);
return new Array(num);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<form name="myForm">
<select ng-model="quantity">
<option ng-repeat="option in range(availableQuantity) track by $index">{{$index + 1}}</option>
</select><br/><br/>
<div ng-repeat="customer in range(quantity) track by $index">
Customer {{$index + 1}} name: <input type="text" ng-model="customer_$index"><br/>
</div><br/><br/>
<button type="submit">Purchase</button>
</form>
</div>
I am using a form control which has set of input boxes.
<form class="form-horizontal" role="form">
<input ng-model="editPagename" class="form-control" required/>
<input ng-model="editUrl" class="form-control" required/>
</form>
The value of editPagename is not getting updated in the scope and it's not even entering in the function.
$scope.$watch('editPagename', function(newVal, oldVal) {
console.log(newVal);
});
Do you have any suggestions on how to solve this problem?
try
$scope.$watch( function() {
return $scope.editPagename;
}, function(newVal, oldVal) {
console.log(newVal);
});
As it has been indicated that $scope will go bye bye in the future (you can have a read at this "preparing for the future of angularjs" on airpair, also a link the the youtube video of the ng-europe talk), and you might want to write your code for easy upgrading to 2.x
So, unless you absolutely need $scope for something, try this:
index.html
<body ng-controller="MainCtrl as vm">
<p>Hello {{vm.name}}!</p>
<div>
<form class="form-horizontal" role="form">
<input data-ng-model ="vm.name" data-ng-change="vm.checkValue(vm.name)" class="form-control" required/>
</form>
</div>
</body>
app.js
app.controller('MainCtrl', function() {
vm = this;
vm.name = "world";
vm.checkValue = checkValue;
function checkValue(value){
console.log(value);
}
});
And a plunker link with the example.
No $scope needed. And of what I can tell, does what you are asking.
Its working for me.Here what I have tried.
HTML :
<div ng-controller="testCtrl">
<form class="form-horizontal" role="form">
<input ng-model ="editPagename" class="form-control" required/>
<input ng-model="editUrl" class="form-control" required/>
</form>
</div>
JS :
app.controller("testCtrl",function($scope){
$scope.$watch( 'editPagename', function(newVal, oldVal) {
console.log(newVal);
});
})
Its logging in the console.
EDIT CODE :
Its better to use Objec model rather than primitive datatype.
Here is the code snippet.
HTMl
<div ng-controller="testCtrl">
<form class="form-horizontal" role="form">
<input ng-model ="objEdit.editPagename" class="form-control" required/>
<input ng-model="objEdit.editUrl" class="form-control" required/>
</form>
{{objEdit}}
</div>
JS :
app.controller("testCtrl",function($scope){
$scope.objEdit = {};
})
I called REST service which gives me an Object contains a map.
Map in java looks like Map
Following is my js
$scope.marks = {};
//get data from rest
StudentService.query().$promise.then(function(data)
{
$scope.students = data;
for(var i=0;i<$scope.students.length;i++){
var obj = $scope.students[i];
//marks (key=studentName, value=mark in decimal)
$scope.marks[obj["studentName"]]=0.0;
}
following is my html
<div class="row" ng-repeat="(key,value) in marks">
<input type="text" class="form-control" ng-model="key" disabled>
{{marks[key]}} <!-- Here it is not updating value from above model-->
<input type="number" class="form-control" ng-model="value">
</div>
When I update value in textfield it is not update value displayed just below textfiled ie {{marks[key]}} is not showing updated value. Please correct me if wrong. Thank you :)
What you are passing to the ng-model is just a string, which is immutable. You need to define the ng-model like this:
<input type="number" class="form-control" ng-model="marks[key]">
angular.module('app', [])
.controller('Ctrl', function($scope) {
$scope.marks = {
mark1: 1,
mark2: 2,
mark3: 3
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
<div class="row" ng-repeat="(key,value) in marks">
<input type="text" class="form-control" ng-model="key" disabled>{{marks[key]}}
<!-- Here it is not updating value from above model-->
<input type="number" class="form-control" ng-model="marks[key]">
</div>
</div>
I searched and tried many ng-xxxx kind of options but couldn't find the one..
I just want to call some function in the controller when radio button is selected.
So it might be similar to following..(Of course, below code is not working)
<input type="radio" ng-model="value" value="one" ng-click="checkStuff()"/>
Is there any way to achieve what I want?
There are at least 2 different methods of invoking functions on radio button selection:
1) Using ng-change directive:
<input type="radio" ng-model="value" value="foo" ng-change='newValue(value)'>
and then, in a controller:
$scope.newValue = function(value) {
console.log(value);
}
Here is the jsFiddle: http://jsfiddle.net/ZPcSe/5/
2) Watching the model for changes. This doesn't require anything special on the input level:
<input type="radio" ng-model="value" value="foo">
but in a controller one would have:
$scope.$watch('value', function(value) {
console.log(value);
});
And the jsFiddle: http://jsfiddle.net/vDTRp/2/
Knowing more about your the use case would help to propose an adequate solution.
Should use ngChange instead of ngClick if trigger source is not from click.
Is the below what you want ? what exactly doesn't work in your case ?
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.value = "none" ;
$scope.isChecked = false;
$scope.checkStuff = function () {
$scope.isChecked = !$scope.isChecked;
}
}
<div ng-controller="MyCtrl">
<input type="radio" ng-model="value" value="one" ng-change="checkStuff()" />
<span> {{value}} isCheck:{{isChecked}} </span>
</div>
In newer versions of angular (I'm using 1.3) you can basically set the model and the value and the double binding do all the work this example works like a charm:
angular.module('radioExample', []).controller('ExampleController', ['$scope', function($scope) {
$scope.color = {
name: 'blue'
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<html>
<body ng-app="radioExample">
<form name="myForm" ng-controller="ExampleController">
<input type="radio" ng-model="color.name" value="red"> Red <br/>
<input type="radio" ng-model="color.name" value="green"> Green <br/>
<input type="radio" ng-model="color.name" value="blue"> Blue <br/>
<tt>color = {{color.name}}</tt><br/>
</form>
</body>
</html>
For dynamic values!
<div class="col-md-4" ng-repeat="(k, v) in tiposAcesso">
<label class="control-label">
<input type="radio" name="tipoAcesso" ng-model="userLogin.tipoAcesso" value="{{k}}" ng-change="changeTipoAcesso(k)" />
<span ng-bind="v"></span>
</label>
</div>
in controller
$scope.changeTipoAcesso = function(value) {
console.log(value);
};
Another approach is using Object.defineProperty to set valueas a getter setter property in the controller scope, then each change on the value property will trigger a function specified in the setter:
The HTML file:
<input type="radio" ng-model="value" value="one"/>
<input type="radio" ng-model="value" value="two"/>
<input type="radio" ng-model="value" value="three"/>
The javascript file:
var _value = null;
Object.defineProperty($scope, 'value', {
get: function () {
return _value;
},
set: function (value) {
_value = value;
someFunction();
}
});
see this plunker for the implementation
i prefer to use ng-value with ng-if,
[ng-value] will handle trigger changes
<input type="radio" name="isStudent" ng-model="isStudent" ng-value="true" />
//to show and hide input by removing it from the DOM, that's make me secure from malicious data
<input type="text" ng-if="isStudent" name="textForStudent" ng-model="job">
<form name="myForm" ng-submit="submitForm()">
<label data-ng-repeat="i in [1,2,3]"><input type="radio" name="test" ng-model="$parent.radioValue" value="{{i}}"/>{{i}}</label>
<div>currently selected: {{radioValue}}</div>
<button type="submit">Submit</button>
</form>