I have the following code. Is there an attribute to restrict to just positive numbers?
<td><span e-step="0.001" editable-number="myNumber" onaftersave="updateValue()">{{ myNumber }} </span></td>
Try e-min="0" to set the minimum value
and e-max="100" to set a maximum.
Here is my sample List ,
$scope.list_element = [1,2,3,4,5,6,7,8,9,10];
I want to Iterate this List into Multiple Rows, each Row should contain 2 elements from the List.
required output,
1 , 2
3 , 4
5 , 6
7 , 8
9 , 10
i am getting like this,
1
2
3
4
5
6
7
8
9
10
I tried this using ng-repeat i.e: ng-repeat="val in list_element"
<div ng-repeat="val in list_element">
<p>{{val}}</p>
</div>
i know this is wrong.. it will give one by one... but i want to iterate 2 values in a row instead one...
The problem is the <p> tag will create a new line by default each time you execute it. And if you replaced it with anything else such as or just text inside a div
<div ng-repeat="val in list_element">
{{ val }}
</div>
this will output 12345678910
In order to solve it, you can use the special $odd or $even like this
<div ng-repeat="val in list_element tracked by $index">
<br ng-if="$odd"/>{{ val }}
</div>
notice that the <br/> will only add a new line to output when it's odd. Adjust it to get the result you are seeking.
I have an integer like 12345. I want to apply a simple filter in AngularJS in order to get two decimal places:
123.45
Update: Thanks to #benohead for the solution:
{{val/100 | number:2}}
All you need is divide 12345 by 100 and then use the number filter to display 2 digits after the comma e.g.:
{{val/100 | number:2}}
A bit of background first:
I am creating a web app that will display multiple reports onscreen simultaneously in a table. The way the reports are stored are in their own separate tables. As of now the angular app loops through the loaded reports and places them like so:
Group 1
Report1 Val1 Val2 Val3...
Report2 Val1 Val2 Val3...
ReportN Val1 Val2 Val3...
Group 2
Report1 Val1 Val2 Val3...
Report2 Val1 Val2 Val3...
ReportN Val1 Val2 Val3...
Group N
Report1 Val1 Val2 Val3...
Report2 Val1 Val2 Val3...
ReportN Val1 Val2 Val3...
The problem I am getting is that some of the reports will lack a row for a given grouping, which makes the overall table mismatched in the end. What I am wondering is if there is a means within ngRepeat to more or less skip a row while looping in order to only place the values in their respective group?
The only solution I can think of for this is to just manually insert blank rows in the other reports so that they will always have matching dimensions, but if angular can help facilitate this it would be better, and thus far Google has yielded no results.
For reference, this is my current table generating code:
<tbody>
<tr ng-repeat-start="row in loadedReports[0].data" ng-if="loadedReports.length > 1 && !loadedReports[1].empty">
<td ng-repeat="count in row track by $index" class="title" ng-show="$index > 12 - range || $first"><span ng-show="$first">{{ row[0] }}</span></td>
</tr>
<tr ng-repeat="report in $parent.loadedReports" ng-repeat-end>
<td ng-repeat="value in report.data[$parent.$index] track by $index" ng-class="{'title': $first && $parent.$parent.$last && ($parent.$parent.loadedReports.length === 1 || $parent.$parent.loadedReports[1].empty)}" ng-show="$index > 12 - range || $first">
<span ng-if="$parent.$parent.loadedReports.length > 1 && !$parent.$parent.loadedReports[1].empty && $first">{{ report.name }}</span>
<span ng-if="($parent.$parent.loadedReports.length === 1 && $first) || ($parent.$parent.loadedReports[1].empty) || $index > 12 - range">{{ value | numberFormat : report.dataType }}</span>
</td>
</tr>
</tbody>
Edit for clarification of code:
range is simply a control on screen that will allow up to 13 of the stored values in a row to be displayed, minimally 2.
data is a 2 dimensional array that contains a row for each group in the data set
In Angular I have this simple model:
$scope.rdata = [
{1: 7, 2: 23,3: 9, 4: 13,5: 32},
{1: 23, 2: 8,3: 67, 4: 11,5: 6},
{1: 35, 2: 12,3: 24, 4: 17,5: 24},
];
I render it in html using ng-repeat:
<table>
<thead>
<p>Example of xy data rendered</p>
</thead>
<tbody>
<tr ng-repeat="row in rdata">
<td ng-repeat="c in col">
<div>{{row[c]}}</div>
</td>
<td>
<input type="range" id="example" min="0" max="1" step="0.01">
</td>
<td><div>
Value compiled: {result of input range value * value in row[c]}
</div></td>
</tr>
</tbody>
</table>
Basically I would like to bind the Value displayed in the last div of my last (where Value compiled is written) as the product of the input range value in the same row and the value in the last column of the same row.
If possible, I would like to understand if there is a way to reference whatever value located in column x and row y and be able to interact with it, put it in a formula etc... without building another angular model.
Let me know if it is sufficiently clear what I'm trying to achieve.
Edit:
my data is a bit more like this:
$scope.financials2 = [ { '2011': 98, '2012': 97, '2013': 100, name: 'Sales' },
{ '2011': -5, '2012': -6, '2013': -7, name: 'Costs of Goods Sold' },
{ '2011': 93, '2012': 91, '2013': 93, name: 'Gross Profit' },
{ '2011': -37, '2012': -36, '2013': -35, name: 'Operating Expenses' },
{ '2011': 54, '2012': 55, '2013': 58, name: 'Operating income' } ]
I may need to restructure the format of the data. The idea is by row I show concepts like Sales, Gross Profit etc... and Values are displayed in columns grouped by years
So the intermediate stage would be like:
Concept 2011 2012 2013
Sales 98 97 100
Cost of Goods Sold -5 -6 -7
Gross Profit 93 91 93
The idea is I would like to add two columns,
one with a slider (input range) for every row, which show growth
rates, so basically an input range going from -0.05 to +0.05
another column showing 2014 forecasts: so Sales 2014 = Sales 2013 * (1+ slider value), Gross Profit 2014 = Gross Profit 2013 * (1+ Slider value)
So we have 2 additional columns, with the first one containing sliders for every row and the second columns showing the result of the 2013 columns times the slider values.
Hope it's clearer now.
There are two pieces it seems you are trying to get here. The first is how do you get the value in the input field, and the second how do you get row[c].
For the input field, you can append the value of the input into your row using ng-model.
For your object it is best to define names for each value, rather than just {1:1, 2:3, 3: 4}, otherwise, just use an array. In the example provided, I called your last item in the object last in this jsfiddle example.
http://jsfiddle.net/reszjcu2/ - warning, the formatting is pretty crap.
Note, I had to provide key and value for the row object, as ng-repeat only works with arrays, not objects. Another reason to use an array if you aren't going to actually have named items in your object.