I'm trying to solve an issue with formatting some input fields.
When I enter the value I want the model to updated as I type, like this:
I enter ex '1200000', i want it to display in the input field '1.200.000' and the model should update as 1200000.
I also want the field to pre-formatted if the model already has a value.
Likewise I need to format in percentage, please see my example:
<div ng-controller="testController as testCtrl">
{{ 'Model: ' + testCtrl.value1 }}
<input type="text" cr-numeric ng-model="testCtrl.value1" /> <br />
{{ 'Model: ' + testCtrl.value2 }}
<input type="text" cr-numeric="interest_3_decimals" ng-model="testCtrl.value2" />
The formatting work fine when I'm entering the values, but I can't make it to work when the model already has a value and to update to value accordingly when i'm entering data.
Please anyone help.
If You need format only in view, You can use number filter;
Just:
Model: {{ testCtrl.value1 | number:2 }}
So, in model You still have original value;
Related
Angular and Ionic Application
I have a form that has a lot of <select> elements, The form offers the user to select from a list or if the <option> = 'Other' then I show another <input> to enter the value. I then save the value to another ng-model.
<select data-ng-model="minor.tests.liveEarth"
name="minorTestLiveEarth"
required>
<option></option>
<option>>200</option>
<option>>299</option>
<option>>500</option>
<option>>1000</option>
<option>Other</option>
</select>
</label>
<label class="item item-input item-stacked-label" ng-show="minor.tests.liveEarth === 'Other'">
<span class="input-label">Please Specify</span>
<input type="text"
placeholder="live earth other"
ng-maxlength="10"
data-ng-model="minor.tests.liveEarthOther"
name="minorTestLiveEarthOther">
</label>
I originally used <datalist> but doesn't show up on iOS.
I assigned the liveEarthOther to the same as the <select> liveEarth but it has 'Other' assigned to the ng-model, which then the user has to delete the input value Other before entering their value.
I have looked for a combobox kind of control but haven't found one that works properly.
How could I make this into a directive or any thing suitable that could perform the renaming without the user having to delete the value.
I want to use this functionality many times in the application I am building.
You may have overcomplicated things by re-using the ngModel. If you change the value minor.tests.liveEarth you'll mess up your select because anything other than the given values will cause nothing to be selected. But if you don't change minor.tests.liveEarth then you'll have to delete it when the user fills in the text input. This would then also mess up the select box!
What I would do is record the value of the text input to a different variable. Keep the ng-show="minor.tests.liveEarth === 'Other'" as it is, but change your input to
<input type="text"
placeholder="Fill in your other live earth"
ng-maxlength="10"
data-ng-model="tempVar" />
This way the input will be still be recorded, but the select won't be messed up on the ngModel change. Due to the placeholder, the user will know that they have to fill in the text box.
In your js, you'll have to create a validating function when the form is submitted along the lines of:
var validateLiveEarth = function(){
if(minor.tests.liveEarth === "Other"){
//check that tempVar meets validation
//assign tempVar to whatever form you're sending
}
}
Lets say, I'm having 5 text box which are created dynamically. All fields having default value that are coming from database and that are binded to input field.
<html>
<div data-ng-repeat="Input in InputArray">
Input Field
<label>{{$index + 1}} : </label>
<input type="text" data-ng-model="Input.InputValue" data-ng-change="" />
</div>
<div>
Calculated Result :
<label>{{CalculatedValue}}</label>
</div>
<div>
<input type="button" name="Update Calculated Result to 3rd Input Field" data-ng-click="" />
</div>
</html>
I'm having label which have Calculated value. Its value is updated from another input field.
I want to update particular / only one text box value from that label value on a button click.
Is it possible to update by using ID of input field?
You don't need any DOM manipulation. The input field is two-way bound to the model, so all you need to get the field value is to get the corresponding model value.
So, to get the third input field value, since it's bound to the InputValue field of the third Input object in InputArray, all you need is
$scope.CalculatedValue = $scope.InputArray[2].InputValue;
Similarly, if you want to set the third field value with the value contained in CalculatedValue, all you need it
$scope.InputArray[2].InputValue = $scope.CalculatedValue;
I am generating a form dynamically in my application. The fields of the forms are the column names in the database table.The user of this application will just pass the name of the table and the skeleton for CRUD application will be prepared dynamically.
In the view part I want to achieve something like this
<div class="form-group" ng-repeat="(key,col) in cols">
<label for="{{::col}}">{{::col | uppercase | replaceUnderscore}}</label>
<input class="form-control" type="text" ng-model="{{::col}}" required />
</div>
In the ng-model I just need the string value that is, if the column name is Username then model value should be something like ng-model="username" and the value should not be displayed in the form field. So I want to achieve kind of one way data binding.
Simply use a JS object, for example $scope.data = {}, and then ng-model="data[col]".
I have a form, and a list of items.
I used ng-model="searchFor" to filter out the list of items appropriately (this part is working fine), but I also want to "submit" the item that's filtered out -- which would require ng-model="adding_item.name" on the input field as well (I think).
Can you have multiple ng-models on one input field?
Is there another way around this?
Try using ng-change event to capture model value and assign it to other input element with its own ng-model.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<input type="text" ng-model="input" ng-change="input1=input;input2=input; " />
<input type="hidden" ng-model="input1" />
<input type="hidden" ng-model="input2" />
<br>Model
<br>{{input | uppercase}}
<br>Model 1
<br>{{input1 | uppercase}}
<br>Model 2
<br>{{input2 | uppercase}}
</div>
No, ngModel wasn't supposed to do things like this, at this point it is better to start relocating the logic from the view. For this scenario you could make use of getterSetter option:
https://docs.angularjs.org/api/ng/directive/ngModel#binding-to-a-getter-setter
It is hard to make substantial suggestions without seeing the code.
I have a problem adding a number from a textbox and place it on another textbox. My situation is like this:
I have one textbox:
<input type="text" ng-model="num1" />
And whatever the input is on this textbox, this will be the value of another textbox like this:
<input type="text" value="{{ num1 + 1 }}" />
This setup shows successfully but with errors. When I type 2013 on the first, the second shows 20131 instead of 2014.
I also tried using filters like this:
<input type="text" value="{{ num1 + 1 | number}}" />
but unfortunately, it doesn't work. What did I miss?
The value of a textbox is a string.
You need to convert it to an integer/float you can do that using parseInt or parseFloat if you have decimals. By default you don't have the parseInt method available in your expression, but you can add it to the scope in your controller to make it available:
$scope.parseInt = parseInt;
<input type="text" value="{{ parseInt(num1) + 1 }}" />
You can see this in action here
You can also use input type=number instead of text. This also has the added benefit of providing a type that matches what you expect to get.
num1 is being interpreted as a string.
Use parseInt() or parseDouble() to convert this to a number when initializing it.
I found a tick method to solve. My case is that I need to parseInt something like item.qty. But I found <div ng-click="item.qty = parseInt(item.qty) + 1>Add</div> won't work.
Finally, I found this method can solve
<div ng-click = "item.qty = item.qty - 1 + 2">Add</div>