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();
}
});
Related
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";
});
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 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 have used ng-paste for textarea while pasting the link in textarea, i am calling a custom function to store that value. Please refer following code
<textarea rows="1" ng-model="myObj.content"
ng-paste="getContent(myObj)">
</textarea>
$scope.getContent = function(a){
console.log(a.content);
}
But in console always I am getting undefined value. How can I get my object value?
Passing model to function does not really make sense since you have already specified ng-model, so it's value will be updated as user types something into the textbox. If you want to track changes you can setup a $watch for your model or specify a function using ng-change.
If you want to know what user pasted, then that's another story. Handling ng-paste can be tricky. To access the actual event, easiest is to include jQuery before angularjs and then do e.g. following:
HTML template
<textarea rows="3"
placeholder="copy/paste here..."
ng-init="content = null"
ng-model="content"
ng-paste="paste($event.originalEvent)">
</textarea>
Controller
$scope.paste = function (event) {
var item = event.clipboardData.items[0];
item.getAsString(function (data) {
console.log(data);
});
};
Related plunker here http://plnkr.co/edit/ea5y5j
Simply use $timeout to call your paste callback after the model has been updated.
$scope.getContent = function(a){
$timeout(function () {console.log(a.content)});
}
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