2 Decimal Places in a <span> element in Angular - angularjs

In my angular app, I have a span element where I need to display some values from service response.
Currently it is showing like
> value = 20.00000000000
whereas I want to display in the following manner
> value = 20.00
The problem is I have to display the value in a <span> element. I want to achieve it without using regex.
Any help would be appreciated.

Since you are using angular, you can do something like so: <span>{{value | number:2}}</span>. This should render your value parameter to 2 decimal places.

Related

How to get span tag value using robot framework?

This is the HTML Code:
<div class="near-matches">
<b class="item">8</b> ==$0
I am trying to get value '8' using xpath and get text keyword in robot framework but it is not returning any value. This is what i tried.
${response} get text xpath=//b[#class="item"]
Log Num Value is ${response}
But this is not returning any value. I would really appreciate the help.
Can you try this?
${value} = Get Text css=b.item
Log To Console ${value}

Wagtail_Streamblock: How do I get the number of items in a Streamblock from inside a template?

I have a widget that I'm making. If the item count is 2, I want to load the image differently then I would if the item count is 3. There has to be either 2 or 3 child_blocks in my Streamblock because I set min_num = 2 and max_num = 3. How do I get the number of blocks inside a Streamblock from inside a template?
For instance, {{self.items.length}}
"items" being my Streamblock
I know that's not correct, just using it as example of what I'm trying to do.
A StreamField value behaves like a Python list, and within a template you can use the length template filter to find its length:
{{ self.items|length }}

How can I round off value in dynamic col-md-(value) in Angular Js?

Hi I have some fields which are coming dynamic and I am adjusting the col-md- according to number of fields. So I wrote an expression some thing like this <div class="col-md-{{12 / variants.length}} Now I want to round off the value. How can I do this ?
In your controller maybe try rounding there instead of on the HTML side?
You can use a function defined in the controller, e.g.
<div class="col-md-{{colWidth(variants.length)}}">something</div>
In the controller:
$scope.colWidth = function(nbVariants) {
// Use whatever formula suits your needs. Be aware that this may return 0
return Math.round(12/nbVariants);
}

How to format currency like kendo ui 's template using angularjs

I want to get this format In USD : 1.123.362,32 and this format in euro :1,122,363.33
I used AngularJS Filter "currency" who Format a number to a currency format but without separtors like "," "."
Use a Filter
here is a link to the docs where you can see an example.
You need to use the currency filter to get the desired effect. It should look like this
HTML
{{ currency_expression | currency : symbol : fractionSize}}
JS
$filter('currency')(amount, symbol, fractionSize)
To do this with the correct , or . you need to have the correct currency format selected.
Math.round()
inside your controller when you are setting the scope make sure you do Math.round() so the number you return is always whole.
Example
Math.round(2.5);
Alternatively
If the currency filter does not meet your requirements you can always use the number format that Angular provides, Doc are here
HTML
{{ number_expression | number : fractionSize}}
JS
$filter('number')(number, fractionSize)
If All Else Fails
Create your own custom filter here is a tutorial on how to build your own custom filter in angular, since your requirements are a little strange you should consider building your own filter to match them. This way you can set your , or . and anything that precedes or follows your number.
Its definitely more difficult than using the built in functionality but since you cant get it to match up with either of the methods above I would take this route.
currency angularjs's filter does not deal comma in usd and point in euro.... I used kendo ui like the filter in grid,it deal all event :
kendo.toString(236, 'c', fr-FR);
hope we find a complete solution with angularjs.

AngularJS drop down (ng- options) not binding - string to object (initial selection)

I am having a problem binding data retrieved from the server to a drop down list. The main issue I think is the fact that the comparison is done on differing object types.
For example:
1. The object returned from the server contains a currency code string. we want this to be bound to an item in the dropdown list
"baseCurrencyCode":"GBP"
The view model returns the list of currencies.. These are returned as a list of currency objects with different properties
{"currencies":[{"id":1,"rateId":0,"abbreviation":"AFN","description":"Afghani","rate":0.0,"rateDescription":null,"languageCode":"en-gb","isDefault":true,"fullDescription":"AFN - Afghani - ","shortDescription":"AFN - Afghani"}}
etc.
Currently, I have got this working by writing a function to go through every property for every item in the list, find the correct property we wish to compare to - do the comparison and then return the initial selection.
When calling my save method I then need to manually bind the currency abbreviation to the object I wish to return to the server.
Surely there must be a better way to do this?
Some of my code for reference..
<select ng-model="selectedCurrency" ng-options="currency.shortDescription for currency in viewModel.currencies"></select>
// Call to my custom method..List, PropertyName, value to compare
$scope.selectedCurrency = InitialiseDropdown($scope.viewModel.currencies, "abbreviation", $scope.updatedObject.baseCurrencyCode);
// Code executed when saving - to bind the currency to the updated object
$scope.updatedObject.baseCurrencyCode = $scope.selectedCurrency.abbreviation;
Any help is appreciated!
EDIT
Sorry if I wasn't clear enough.. To summarise..
The main problem here is binding to the drop down and initial selection.
The object we are updating contains a parameter (string) of the currency abbreviation.
The list we select from is a list of currency objects. As these are two differing object types I have been unable to plug in angulars 2 way binding and have written some code to do this on initial retrieval and when saving.
The cleanest way to fix this would be to return a currency object in our retrieval instead of a simple string of the abbreviation, but this is not an option.
Is there a better way of enabling 2 way binding on different object types ?
Thanks again
It is not exactly clear what the problem is, but you can save yourself some work by binding the <select> to the currently selected currency object (so you don't have to look it up later).
select + ngOptions allow you to bind to one value while displaying another, with the following syntax:
<select ng-model="selectedCurrency"
ng-options="currency as currency.shortDescription
for currency in viewModel.currencies">
</select>
In the above example, $scope.selectedCurrency will be bound to the whole currency object, but currency.shortDescription will be displayed in the dropdown.
See, also, this short demo.
UPDATE:
In case you don't need to bind to the whole currency object, but just bind updatedObject's baseCurrencyCode property to the abbreviation of the selected (in dropdown) currency, you can do it like this:
<!-- In the VIEW -->
<select ng-model="updatedObject.baseCurrencyCode"
ng-options="c.abbreviation as c.shortDescription
for c in currencies">
</select>
// In the CONTROLLER
$scope.currencies = [...];
$scope.updatedObject = {
...
baseCurrencyCode: <baseCurrencyCodeFromServer>
};
See, also, that short demo.
I have had the same problem, ng-model and ng-option being from 2 different sources. My ng-model is bound to a value in a json object representing a chosen filename and my ng-option is a list of possible values taken from a csv file.
In the controller I am reading a directory via a Nodejs route, and creating a json array of filenames like this
var allCsvFiles = [{"name":"file1.csv"},{"name","file2.csv},etc..]
The current csv file, i.e. the selected one is stored in another json array
[{"date":"01-06-2017","csvfile":"file1.csv","colour":"red"},{...}, etc].
I was using the following code for the dropdown:
<select type="text" ng-model="file.csvfile"
ng-options="opt.name for opt in allCsvFiles track by opt.name"></select>
Which caused the current selection to be blank and if I selected an item from the dropdown it put [object],[object] as the current selection. If I stepped through the code I found that it seemed to be selecting {"name","file1.csv"} as the option and couldn't display it, this seemed odd as my ng-options selection looks like it should just return the value of "name" not the array entry. I tried many different ways to make this work but eventually I found that if I made the list of possible selections a plain javascript array:
var allCsvFiles = ["file1.csv","file2.csv", "file3,csv]
and changed the select to:
<select type="text" ng-model="file.csvfile" ng-options="opt for opt in allCsvFiles"></select>
then the dropdown selection worked as expected.
I may have missed some other obvious solution here, but as the array of json objects is one dimensional anyway it doesn't seem to be an issue.
It looks like the OPs question has been answered, I just thought I'd add this as it solved it for me.

Resources