Hi I want to add two field and put in another field
<input type="text" ng-model="pfi.value1">
<input type="text" ng-model="pfi.value2">
<input type="text" ng-model="pfi.sum" >
its working fine in label
<label>{{ pfi.value1 + pfi.value2}}</label>
but how to do same thing in text field
You should set pfi.sum = pfi.value1 + pfi.value2; inside your controller. I'm not positive what the two-way binding would do if you then edited the text field attached to pfi.sum, but I suspect it wouldn't be good. However, for display purposes, this should work.
You can do it in the template
<input type="number" ng-model="pfi.value1">
<input type="number" ng-model="pfi.value2">
<input type="number" ng-model="pfi.sum" >
<p>{{ pfi.sum = pfi.value1 + pfi.value2}}</p>
The $interpolation service evaluates the exoression on each change to the inputs and updates the sum.
The DEMO on JSFiddle.
you should do it on the controller
pfi.sum = pfi.value1 + pfi.value2
also,you need to add the controller to your html file.
you should do that operation in your controller,
assuming you are using pfi for controllerAs attribute?
x.controller('xctrl', function() {
var pfi = this;
pfi.sum = pfi.value1 + pfi.value2;
});
Related
I am using AngularJS. I have two input fields: total marks and marks obtained, as well as a 3rd field which is percentage. Now after entering total marks and marks obtained, I need to calculate the percentage automatically.
Here is my html :
<div class="form-group">
<label class="control-label">Total Marks</label>
<input type="text"
class="form-control input_field"
name="totalMarks"
data-ng-model="student.totalMarks" />
</div>
<div class="form-group">
<label class="control-label">Marks Obtained</label>
<input type="text"
class="form-control input_field"
name="marksObtained"
data-ng-model="student.marksObtained" />
</div>
<div class="form-group">
<label class="control-label">Percentage</label>
<input type="text"
class="form-control input_field"
value={{ ((student.marksObtained/student.totalMarks)*100).toFixed(2) }}
name="rank"
data-ng-model="student.rank" />
</div>
Can anyone tell me how to auto generate rank field with percentage as soon as I enter marks obtained. Currently, I am doing as shown above but it is not working.
Not sure that your calcul for percentage is exact, but this Plunkr is working with a watcher on student properties.
app.controller('MainCtrl', function($scope){
$scope.$watchGroup(['student.totalMarks', 'student.marksObtained'], function(){
if($scope.student.marksObtained !== undefined && $scope.student.totalMarks !== undefined)
$scope.student.rank = (($scope.student.marksObtained/$scope.student.totalMarks)*100).toFixed(2);
})
});
https://plnkr.co/edit/NsNge0mzrgjjUgBZ332p?p=preview
You can try assigning your calculation inline, like this:
<input ng-model="student.rank" ng-value="student.rank = ((student.marksObtained/student.totalMarks)*100).toFixed(2)">
Running Example on JsFiddle
It does not work because your input is linked to a ng-model.
There is two ways to solve this problem :
Setup a watcher on student.totalMars and student.marksObtained, and update student.rank with new value.
Do not link your percentage to student.rank and just set the value as you did.
You can check here for the second way.
In your controller, add the following function and variable :
function getPercentage() {
// dividing by zero is bad !!!
let ratio = $scope.student.marksObtained / ($scope.student.totalMarks || 1);
return (ratio * 100).toFixed(2);
}
$scope.student.percentage = getPercentage();
Then change the last <input /> of your view to :
<input type="text"
class="form-control input_field"
ng-value="student.percentage"
name="rank" />
If you want your input to have two-way data binding, use ng-model instead of ng-value.
I tried to set up data-minute-step={{somevalue}} but if I change the value, it doesn't update the picker. Can I do something about it?
Example:
<input type="number" ng-model="stepSize">
<input bs-timepicker data-minute-step="{{stepSize}}">
This is what I have:
<input id="timetable.amountPerLeson"
class="form-control"
type="number"
step="15"
placeholder="45 min"
ng-model="durationStep">
<input id="timetable.start"
class="form-control"
type="text"
placeholder="date"
ng-model="slot.startHour"
bs-timepicker
data-time-format="HH:mm"
data-length="1"
data-minute-step="{{durationStep}}"
data-arrow-behavior="picker"
ng-show="slot.name === 'Hours'" >
I took a look on the source code and it doesn't seem to watch changes on the attributes - They are evaluated only once, so that's why chaning the data-minute-step via input doens't work.
The workaround I can suggest is to force rendering the timepicker element, when you update the minutes steps:
<input id="timetable.amountPerLeson" class="form-control" type="number" step="15" placeholder="45 min"
ng-model="durationStep" ng-change="minutesUpdated()">
<input id="timetable.start" class="form-control" type="text" placeholder="date"
ng-model="slot.startHour"
bs-timepicker data-time-format="HH:mm" data-length="1" ng-attr-data-minute-step="{{durationStep}}"
data-arrow-behavior="picker" ng-show="slot.name === 'Hours'" ng-if="!renderTimePicker">
Add the render function to the controller (Make sure you inject $timeout):
$scope.minutesUpdated = function() {
$scope.renderTimePicker = true;
$timeout(function() {
$scope.renderTimePicker = false;
});
};
Changing the minutes step from the view will trigger the $scope.minutesUpdated() function, it will remove the timepicker from the view (Because I added ng-if="!renderTimePicker" to the element), and bring it back again after the view has rendered (By resetting $scope.renderTimePicker = false; inside the $timeout).
Please note that I changed the data-minute-step to ng-attr-data-minute-step because I think it will make it work.
I'm having an issue on updating or assigning the value or data into the model using ng-value.
I would like to copy any values in the DisplayName model to CopyDisplayName and using below directives i was able to do that, But the problem is the model CopyDisplayName doesn't have any value when I submit my changes. It can only have if I inputted it manually.
<input type="Text" ng-model="DisplayName" ng-disabled="true" />
<input type="Text" ng-model="CopyDisplayName" ng-value="DisplayName" />
Forgot to include that the DisplayName is disabled.. the data will came from service call.
ngValue
Binds the given expression to the value of or input[radio], so that when the element is selected, the ngModel of that element is set to the bound value.
You can take a look in this documentation.
So basically, the one you're doing right now will not work.
You can do this in your angular controller:
$scope.copyValue = function () {
$scope.copyDisplayName = $scope.displayName;
}
In html:
<input type="text" ng-model="displayName" ng-change="copyValue()" />
Just assign one variable to another:
// in the controller
$scope.CopyDisplayName = $scope.DisplayName;
If you need to keep them in sync (and for some reason, you don't want to just use the same variable), then you can keep them updated via ng-change:
<input type="Text" ng-model="DisplayName" ng-change="CopyDisplayName = DisplayName" />
Directives like ng-value (or ng-checked) only toggle the attributes in the DOM - they do not alter the View Model.
You can add $watch on DisplayName as:
$scope.$watch('DisplayName',function(newValue, oldValue){
console.log(newValue +":"+oldValue)
$scope.CopyDisplayName = newValue;
});
To have copy updated you need copy value by reference. For that you need to wrap displayName to object:
$scope.model = {DisplayName: 'val'}; and make a copy of it: $scope.modelCopy = $scope.model;
<input type="Text" ng-model="model.DisplayName" ng-disabled="true" />
<input type="Text" ng-model="modelCopy.DisplayName" ng-value="DisplayName" />
JSFiddle
what you can do in controller is watch the model and copy that value whenever it is changed($watch will do that for you) you dont need ngChange on the HTML.
$scope.$watch('displayName', function() {
$scope.copyDisplayName = $scope.displayName;
});
I have a simple question about angularjs one-way-data-binding.
Assume that in same page, we have two input box A and B,
How can they work like:
input A will change input B, but input B will NOT change input A,
I know angular has bindonce, but I want is one-way-data-binding
thanks for your answer..... I tried, but all solutions are failed.........:(
Can we add something like directive to controll it?
You can use ng-value. It will show the model, but not update it. Doesn't require any extra JS wiring.
<input type="text" ng-model="a">
<input type="text" ng-value="a">
DEMO
DEMO
HTML
<input type="text" ng-model="a">
<input type="text" ng-model="b">
JS
// Put this code in your controller
$scope.$watch('a', function(newValue, oldValue) {
if ($scope.b === undefined || newValue !== oldValue) {
$scope.b = newValue;
}
});
Try this:
Html:
<input type="text" ng-model="a" data-ng-change="valueChange(a)">
<input type="text" ng-model="b">
Js:
$scope.valueChange=function(newValue){
$scope.b = newValue;
}
By default, it seems that Angular reevaluates its binding from a particular DOM element (e.g Text Input) to the underlying scope property on keypress or paste - i.e, whenever the value in the text input changes.
Is it possible to make it only refresh the binding on blur? I.e. do something like:
<div ng-app>
<div ng-controller="ctrl">
<input type="text" ng-model="base" ng-update-type="blur"/>
<input type="text" />
<span ng-bind="doubled()" />
</div>
</div>
Take the following JS fiddle:
http://jsfiddle.net/f76dW/
I would like the doubled span to only update when I move the focus out of the first input
You can use ng-blur and a dummy variable (base_ in this case) to achieve that effect: http://jsfiddle.net/f76dW/1/
Template
<input type="text" ng-model="base_" ng-blur="updateBase()" />
Controller
function ctrl($scope) {
$scope.base = $scope.base_ = 1000;
$scope.updateBase = function () {
$scope.base = $scope.base_;
};
$scope.doubled = function() {
return $scope.base * 2;
}
}
Use ng-model options. Using a blur hack is tricky, because a blur may not be a change.
<input type="text" ng-model="a.b" ng-change="callScriptThenServer()" ng-model-options={updateOn: 'blur'}"/>