I ma very beginner in Angularjs and pardon my silly mistakes. I have a table which shows data in three columns and i want to filter this table based on a condition and hide unnecessary data in one column which contains integers. I have used ng-show with some condition linked to ng-model and this is working perfect if i enter data in my ng-model only after loading total form. But, i want to show all the table data in the beginning and then hide unnecessary data based on ng-show condition.
How can i do this? I am struggling!
<tr ng-show= "change > val1 " ng-repeat="change in montlyProjection();" >
<td>some data</td>
<td class="number">some data</td>
<td class="number" ng-class="positiveNegative(convertToNumber(startBalance) + change)">some data</td>
</tr>
</strong><input type="text" ng-model="val1" placeholder="Enter Amount" />
<tr ng-show="((change > val1) || !val1)" ng-repeat="change in monthlyProjection()">
Try adding additional conditions to the ng-show directive. If !val doesn't work try using "angular.equals(val1,'')" or "angular.isDefined(val1)"
Related
In my AngularJS website, I would like to show a table containing adresses that should be editable in the cells. This is how the columns look like:
Id, Label, Address, Geolocation, Additional Information
The Address column contains an input element, so that I can search for another address to change the data.
The table has sometimes more than 200 rows. I am experiencing massive performance problems when loading the table the first time and also when resizing the div in which the table is.
My approach so far:
Table HTML:
<div>
<table>
<tbody>
<tr table-row
address="address"
ng-repeat="address in data">
</tr>
</tbody>
</table>
</div>
I came up with a custom directive "table-row" which contains the td elements for a single row. It also has its own scope under which the address can be changed.
Table-row HTML:
<td>
{{ address.id }}
</td>
<td>
{{ address.label }}
</td>
<td>
<input type="text"
ng-model="addresstext"/>
</td>
...
Some thoughts on how this could be done better:
The main problem with my code is that the table is getting pretty big and I keep creating a scope for every single row. I suppose that the performance is going to increase if there would just be a single scope. However, I do not see how to do this without an ng-repeat to create the rows.
Isn't there a way to have one scope for the table and still a dynamic number of rows in the table, each being editable with the input textboxes in the cells?
I have a simple table row.
The row is generated by below code.
<tr ng-init="cacheChanged">
<td>Expiration Period</td>
<td ng-repeat="system in tableData.regions[0].systems">
<input type="text" ng-model="system.cacheDuration" ng-change="cacheChanged=true">
<span>h</span>
</td>
<td>
<button type="button" ng-click="saveCache()" ng-disabled="!cacheChanged">Save</button>
</td>
</tr>
When any of the four values changed, the save button is supposed to be enabled. However, it is still disabled all the time. Anyone knows why? Thanks in advance!
In your case you should use $parent.cacheChanged instead of cacheChanged variable. As ng-repeat does create child scope for each loop while rendering DOM. In short the cacheChanged variable inside ng-repeat is not same as that of cacheChanged used there on button.
Markup
<td ng-repeat="system in tableData.regions[0].systems">
<input type="text" ng-model="system.cacheDuration" ng-change="$parent.cacheChanged=true">
<span>h</span>
</td>
There is better way to go for it will be using Dot rule while defining ng-model, look at this detailed answer here.
in a table with ng-repeat is it possible to add a cell only to one row?
in my code:
<tbody>
<tr ng-repeat="user in users ng-click="selectUser(user)">
<td>{{user.username}}</td>
<td><input type="text"....></td>
<td><input type="checkbox"...></td>
<td><input type="submit" ... ng-show="user==selectedUser" /></td>
</tr>
</tbody>
in this code I want the last td appears only on the selected row and does not affect other rows, is it possible? or it is JS or CSS thing ?
First off you should be using the controller as syntax, it automatically puts everything in the controller under 1 object, which can cause issues with Angular. But I don't think that's the issue here.
The user you select could be equal to the selectedUser, but if they aren't pointing to the same reference, they won't be able. If usernames are distinct I'd change the ng-show="user.username == selectedUser.username"
and that should work fine.
It is possible, it seems like your code is mostly correct, but you're using selectedUser as a function and as an object representation of user. Maybe your function would be called selectUser which would set $scope.selectedUser. ng-show="user == selectedUser" would make since then.
I'm personally not a big fan of having conditions in the view, so I'd have a function in the controller which does the comparison and returns true or false.
function isSelectedUser(user) {
return user == $scope.selectedUser;
}
then you can just use ng-show="isSelectedUser(user)"
Use JQuery to append the <td> on the selected row <tr>. The :nth-child() is an easy way for you to select a row.
var selectedRow = 2;
$('tbody tr:nth-child('+ selectedRow +')').append('<td><input type="submit" /></td>');
Im trying to create an ng-table which needs following
each cell should be editable on single click.
Each cell will have a template ( like few cells are text fields and few cells have options dropdown in it ).
3.This grid should always have one empty/new row for user to enter values , as user clicks on empty/new row ( which is always shown by default ) a new row should get added.
More precise, do I have to add a template like this ?
<td data-title="'Agency #'"><input type="text" ng-model="dealer.AgencyKey" /></td>
also for options do I have to add like this
<td data-title="'Account Type 2'"> <select class="form-control" ng-model="contractsHeader.AccountTypePT" required autofocus id="accountType2Options">
<option ng-repeat="accountType2 in accountTypes2" value="{{accountType2.KeyValue}}">{{accountType2.Description}}</option> </select> </td>
NOTE : I have basic knowledge on ng-table ( creating read only table by binding data from service )
Appreciate your thoughts and inputs
You need to move your ng-repeat from the option to the select
The form to be validated is master detail i.e. it has two portions. master portion contains two fields while detail portion initially has two rows but they can be increased by pressing a button on DOM. The form looks like the following
The problem is that in detail portion I have to create the inputs using ng-repeat like
<div class="form-group">
<table style="margin-left:10%;">
<tr>
<th>Account id</th>
<th>Amount</th>
</tr>
<tr class="edit-row" ng-repeat ="entry in model.Entries">
<td>
<input type="text" ng-model="model.Entries[$index].AccountId" required name="Entries[{{$index}}].AccountId"/>
</td>
<td>
<input type="text" ng-model="model.Entries[$index].Amount" required name="Entries[{{$index}}].Amount"/>
<span class="field-validation-error text-danger" ng-show="transactionForm['Entries['{{$index}}'].Amount'].$invalid && transactionForm['Entries['{{$index}}'].Amount'].$dirty">
Amount is Required
</span>
</td>
</tr>
</table>
</div>
But the ng-show attribute is not working fine for the detail portion. This is because, I have dots (.) and brackets ([) in the name of input fields. How can I perform validation in such scenario. Someone may argue to change the names of the input but I have to use this convention for input names in the detail portion. In current code, I have used bracket notation in ng-show attribute of Amount field as described in This SO question, but to no avail. you can find complete example at plunker
Can you do something like this?
ng-show="model.Entries[$index].Amount === ''"
Rather than trying to check the form value check the actual model value. This will work assuming you are just checking to make sure there is a value other than the empty string. You will have to make the check more specific to what you are looking for. You can also set the type="number" if you only want to allow the user to enter a numeric value.