I am loading data from database in JSON Format, like this: ($scope.fees):
{"1_0":"2000","1_1":"1900","1_2":"1800","1_3":"1700","1_4":"1600","1_5":"1500","1_6":"1400","1_7":"1300","2_0":"4000","2_1":"3900","2_2":"0","2_3":"0","2_4":"0","2_5":"0","2_6":"0","2_7":"0"}
This needs to be displayed in a table (like grid), in which rows and columns are not fixed. This code works for me now:
<tbody data-ng-repeat="obj in courses"><!-- Courses JSON -->
<tr><th>{{obj.name}}</th></tr>
<tr data-ng-repeat="bat in obj.batches"><!-- Each course contains Batches -->
<td>{{bat.bname}}</td>
<td data-ng-repeat="obj in categories"><!-- Columns based on categories -->
<input type="text" name="{{bat.bid}}_{{obj.id}}" data-ng-model="fees.1_0" />
</td>
</tr>
data-ng-model="fees.1_0" should be actually as provided for the name attribute: data-ng-model="fees.{{bat.bid}}_{{obj.id}}" but this doesn't work. Is there any solution to get this working? Thanks in advance.
Edit: I can change the JSON format if there is a better solution to get this done. The current format is batch<underscore>category: fees
Try data-ng-model="fees[bat.bid + '_' + obj.id]"
Check this Demo. This shows how to attach model dynamically from JSON object.May this will help you.
Just like variable keys in javascript use [] in the ng-model as the as bracket value must be your object key
Related
I need to display this values of an property inside an json object with ng-repeat.
"id_products" : [5730827476402176: 2, 5173045979250688: 1, 5735995932672000: 2]
I am using ng-repeat on <tr> inside a table. If the property is a simple array I can display without problems but as the object showed above I am just getting [].
This is a snippet of my code:
<tbody>
<tr class="animate-repeat" ng-repeat="item in sales|orderBy: 'name'|filter: filter">
<th> {{item.id_products}}</th>
.....
I tried nested ng-repeats but I get the same result.
What is the right way to display this object?
Thanks.
see the ng-repeat documentation - "The built-in filters orderBy and filter do not work with objects, and will throw an error if used with one.
If you are hitting any of these limitations, the recommended workaround is to convert your object into an array that is sorted into the order that you prefer before providing it to ngRepeat"
https://docs.angularjs.org/api/ng/directive/ngRepeat
This object data structure is not javascript or json valid.
I have two table, table 1 and table 2.. Table 1 has a field count. based on the count value(count value= no of rows populated), rows should be automatically populated in table 2. I am new to angularjs. Please let me know how can acheive this
To render values in your table you can use ng-repeat directive.
You can use things such the ngIf, ngShow and ngHide directive to hide or show DOM objects based on an expression, or use ngRepeat to dynamically add additional DOM object based on a growing or shrinking array in your controller.
My guess is you're looking for an visibility directive, so I think the following might help:
<table id="table1">
<tr data-ng-repeat="row in table1">
<td>{{row.someData}}</td>
</tr>
</table>
<table id="table2" data-ng-show="table1.length == 0">
<tr data-ng-repeat="row in table2">
<td>{{row.someData}}</td>
</tr>
</table>
Note that both tables are filled with an ngRepeat by using corresponding arrays from your controller as a source. On the second table, you can see an ngShow directive with an expression that says: "if table1 is empty, show me".
I hope this helps.
Hope someone can help me out with this:
I'm working with knockout and have the following json array:
[[174302,"BUSINESS - APPLICATION TO CONDUCT A BUSINESS FROM HOME.pdf",".pdf","DK89639"],[120183,"Glovent-Brochure.pdf",".pdf","DK472894"]]
inside my "consumerData" variable.
As you can see there are 2 arrays with 4 elements inside each.
Here is how I am trying to access it:
<div data-bind="foreach: consumerData" style="margin-bottom:100px;">
<table>
<tr>
<td colspan="2">
<p style="font-size:larger; margin-bottom:5px;"><a data-bind="attr: { href: 'http://someaddress/address/'+consumerData[0]+''+consumerData[2]+'?key='+consumerData[3]+'' }"><div data-bind="text: consumerData[1]"></div></a></p>
</td></tr>
</table>
</div>
So this is looping twice which is correct but how do I access my data inside each array?
PLease help!
Thanks!
Regards
Francois
You can access unnamed data within a loop by accessing the $data object (instead of consumerData again), which represents the current context
See this fiddle:
https://jsfiddle.net/5c6y46bo/
Also, you don't need to put a div inside your link to hold the text of the current object, just put the text binding within the <a> element's binding alongside the attr binding.
i'm learning angular, so please be gentle ;)
I have a table that is populated with some data. And i would like to add filtering (not angular filter, but data filter) on each column.
The idea for me is to add a text box at the top of each column in the header. Then use those textbox values to create the Filters array in my service when it called the api to get the data.
I currently have:
<tr>
<th ng-repeat="column in report.Columns" ng-show="column.IsVisible">
<span class="sort" ng-click="updateSortOrder($index)" ng-class="{'sort-asc': predicate == $index && !reverse, 'sort-desc':predicate == $index && reverse}">{{ column.DisplayName }}</span>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-filter fa-fw"></i></span>
<input class="form-control" type="text" placeholder="Search" ng-model="">
</div>
</th>
</tr>
what i'm stuck on, is how to assign the text boxes to the ng-model, naming them dynamically based on the column that they stand in.
I thought about using ng-model="column.ColumnName" - but wont that bind the text boxes to the report.Columns.ColumnName ? i dont want to edit that, i want to create a new var on the scope for each one.
Something like $scope.Filters.-ColumnName-.
And then i would like to loop through each ColumnName on $scope.Filters and use it's value in my filters array on my service call.
I hope this is making sense. If I'm heading down the wrong route to achieve this, please feel free to point me in the right direction, as i said, i've just started learning Angular.
Thanks in advance
This is not angular related specifically it is more of a javascript issue.
For variable property names you use [] object notation
<input ng-model="filters[column]"
In controller :
$scope.filters ={}
If properties aren't already created in the scope object, ng-model will create them automatically when there is any user input
I'm attempting to build an import for our system. I accept an excel file, parse it within a web api into a data table object (number of columns and rows is unknown). I send the data table via json back to my angular app. After a user maps the columns to fields in our database, I then take the data table, pass it back to an api.
The problem is when I pass the table back to the api, any changes I've made to the data isn't applied. It's as if ng-model isn't working
<table>
<tr ng-repeat="row in dt track by $index">
<td ng-repeat="col in row">
<input type='text' ng-model="col" />{{col}}
</td>
</tr>
</table>
Visually this produces exactly what I want. The {{col}} visually shows me that typing different data shows me ng-model must be updating, because {{col}} always shows the value inside the text box
But when I pass my data table to the api, it contains all the original values
ng-model="col" sets the value of col, which is a copy of what is in row[$index]. To update the value which in row, use ng-model="row[$index]".