When I output a variable like this I can format it to decimal places:
{{variable|number:2}}
How would I do the same thing in a text input?
<input type="text" ng-model="variable">
This doesn't work:
<input type="text" ng-model="variable|number:2">
Filter are not allowed to use on ng-model.
Create directive and watch model value and update it upon change.
//You can add watch in controller as well. Here is the sample
$scope.$watch('variable', function() {
$scope.variable= "Here add your logic";
});
Related
I want to make a Roman numeral calculator that converts numbers, typed in a text input, to the numerals instantly. I understand how to bind a variable to the text input but I don't know how to 'perform a function' on it as it's being typed. How do I do this?
Thanks.
Use the ng-change directive : here the docs
Example
In template
<input type="text" ng-change="yourFunction(value)" ng-model="value"/>
In controller
$scope.value = ""
$scope.yourFunction = function(value){
//Put code logic here
}
EDIT :
In your case, you can also create a filter
module.filter("convertToRomanNumber", function(){
//Improve code logic here
return function(input){
var value="";
for(var i=0; i<input; i++){
value+="I"
}
return value;
}
})
and call it in your template
<input type="text" ng-change="yourFunction(value)" ng-model="value"/>
{{value | convertToRomanNumber}}
$scope.watch on the ng-model of the text input. Then run the code you want to execute on the ng-model variable.
e.g.
// html...
<input type=text ng-model="textBox" />
// controller
$scope.$watch('$scope.textBox', function(newValue, oldValue) {
// do stuff to the text everytime it changes
});
The benefit of this $scope.$watch is for example you don't want to execute the function on the newValue unless it is 2 or 3 characters more. It just gives you some more control over the function compared to a simple ng-change.
I have used angular's ng-model for quite some time which demonstrates two way data binding. What i want to accomplish is to bind only an input field to a model only if there are changes.
If I have
<input value="Hello world">
I want the value to be propagated to a model variable only if there are changes made to the value.
Answer would depend on event you want to use to update model.
Assuming you are wanting an "edit form " but don't want the master model to update live you can make a copy of the model and extend the master on "save"
Starting data:
$scope.item ={age: 25, name: 'Foo Bar'};
$scope.editItem = angular.copy($scope.item);
HTML
<input ng-model="editItem.age">
<button ng-click="updateItem()">Update</button>
Update function:
$scope.updateItem = function (){
$http.put(url, $scope.editItem).success(function(resp){
// merge data
angular.extend( $scope.item, $scope.editItem);
});
}
You could also do something similar using ng-change
You can do it with using of additional variable and $watch. Example:
<input type="search" ng-model="searchText">
And in controller
$scope.$watch('searchText', function() {
$scope.filterText = $scope.searchText;
});
So $scope.filterText will be changed to $scope.searchText value if any changes in input
I need to automatically populate second textbox once the first textbox is populated by user using angularjs. Both of them have their own ng-model so I can not change ng-model. Is there a way I can just copy the value from first textbox to second by keeping ng-model different?
In the controller, you need to build the logic to assign model1 value to model2 whenever there is a change in model1
Your html part :
<input ng-model='model1" ng-change="update2()">
<input ng-model='model2" >
And somewhere in the relevant controller,
$scope.update2 = function(){
$scope.model2 = $scope.model1;
}
You can monitor changes to your $scope using the $watch function. This is a more appropriate way for binding changes in Angular. try below snippet:
Controller:
$scope.$watch('first',function(){
$scope.second = $scope.first;
});
HTML:
<input ng-model='first'>
<input ng-model='second' >
i tried calling the values using ng-change between two different ng-models. it works.
but the data is parsed to the other ng-model only if the data is changed, is there any alternate solution where i can have the data in both ng-models before changing data
I tried something like this
HTML
<input ng-model="customer.name" ng-change='tripsheet.customer_name=customer.name;'>
<input ng-model="tripsheet.customer_name" type="text" class="form-control input-lg" placeholder="Customer Name">
JS
$scope.customer = {
name:$scope.customers[$scope.whichItem].name,
address:$scope.customers[$scope.whichItem].address,
phone:$scope.customers[$scope.whichItem].phone
}
i want the routeParams data in both the above ng-models.
With something like this in your controller?
$scope.customer = {
name: "Tom"
};
$scope.tripsheet = {
customer_name: $scope.customer.name
}
Plunker
#mainguy's answer is a very good approach.
Or alternatively you can go with $watch instead of ng-change.
initialize a watcher for the model object
$scope.$watch('customer.name', customerNameChanged);
and define the function
function customerNameChanged() {
if(!$scope.tripsheet)
$scope.tripsheet = {};
$scope.tripsheet.customer_name = $scope.customer.name
}
ng-change triggers only when there is a user interaction and the data is changed.
$watch is triggered when the model object is changed programmatically and also when they’re being defined the first time
I have following controller.
app.controller("testCtrl", function(){
$scope.utcTime = 1380150771;
$scope.parseTime = function(t){
//return local time string
}
});
In the view, I have
<input type="text" ng-model="parseTime(utcTime)" />
Its not working. Can I bind ng-model to a method that returns the string ?
Any alternative way to show the value in the input button ?
You can use ngChange and ngModel both
JS
$scope.utcTime = 1380150771;
$scope.parseTime = function(){
console.log($scope.utcTime);
//return local time string
}
HTML
<input type="text" ng-change="parseTime()" ng-model="utcTime" />
ng-model is mapping through tag and controller.
At first you can see default utcTime (1380150771) that you assign in input tag.
And when you change the text in input tag, ng-model(utcTime) will be changed automatically in the controller.
Then each letter that you typed will call ng-change(parseTime) function.
You can check by console.log method.
My solution is based on this source:
https://groups.google.com/forum/#!topic/angular/1mnra0vamtg
I have edited the Plunker sample code to use ng-value to generate and update ng-model using calculation function. See this link below:
http://plnkr.co/edit/Fmqw0wp37Ndk1yuWvFkV?p=preview
Also, the above sample shows you how you format the result for display using custom filter.
In other posts, some have suggested using $watch() to detect change to input variables and update ng-model variable accordingly. Using ng-value is much better than using $watch() since the latter forces you to include all input variables in the watch which may be impossible if you have very complex calculation model.
Tarek
Try doing this
app.controller("testCtrl", function(){
$scope.utcTime = 1380150771;
$scope.result= $scope.parseTime( $scope.utcTime)
$scope.parseTime = function(t){
//return local time string
}
});
html
<input type="text" ng-model="result" />
Yes you can try follwing:
its working example:
<input type="text" ng-model="parseTime(utcTime)" />
app.controller("testCtrl", function(){
$scope.utcTime = 1380150771;
$scope.parseTime = function(t){
//return local time string
new Date(t).toISOString();
}
});