<tr ng-repeat="a in people">
<td>
{{a.firstname}}
</td>
<td>
{{a.lastname}}
</td>
<td>
{{a.email}}
</td>
</tr>
protractor code
var firstname = element.all(by.repeater('a in people'));
expect(firstname.get(0).getText()).toEqual('george');
This returns the entire first row. How do I get the first column? Thanks
You could get it like this:
var all = element.all(by.repeater('a in people')).all(by.css('td'));
expect(all.get(0).getText()).toEqual('george');
element.all(by.repeater('a in people')); it will find just one element. If on the page will be two elements with this repeater text it will find two. But you need make search by td also.
Technically when ng-repeat executes, it will repeat the element into the dom, In your case < tr ng-repeat='a in people'> tag will be repeated. So element.all(by.repeater('a in people')) results in multiple rows, hence get(0) method will return first row.
We can use following code to get first column of the first row.
var firstname = element(by.repeater('a in people').row(0).column('a.firstname'));
expect(firstname.getText()).toEqual('xyz');
Related
I want to insert a table with two columns where the first column contains several rows and second column should contain a single row. To achieve this I wrote code like below.
<tr ng-repeat="x in data">
<td>{{ x.no }}</td>
<td ng-if="this.rowIndex === 0" rowspan='{{x.length}}'> ok </td>
</tr>
Where data is an array of JSON objects containing single property called no. Using this.rowIndex is correct here or Am I making mistake here.
You have to use the variable $index from the ng-repeat directive (see the documentation).
Furthermore, you read the length of the x object; I believe you intended to do so with the data variable.
You can see the result in this codepen.
I am new to Angular and have been trying to make a dynamic table.
The user enters the no of columns he wants and then he can add as many rows to each column as he wants.
I have provided an "add" button at the end of each column to add new row to that particular column.
My code looks somewhat like this:
<table>
<tr>
<th ng-repeat="x in setno"> SET {{x.number}}</th>
</tr>
<tr ng-repeat="z in selected">
<td> </td>
</tr>
<tr>
<td ng-repeat="x in setno">
<button ng-click="selected.push({})"> add </button>
</td>
</tr>
</table>
where, setno is list containing numbers:
$scope.setno[{id:"a", number:"1"},{id:"b", number:"2"},...];
and selected has a similar structure.
The problem is that when I click "add" button of any column, a new row gets add to all the columns.
Whereas I want, a new row to be added to only the one whose "add" button has been clicked.
How can I know whose "add" button has been clicked?
How can i know whose "add" button has been clicked?
You need access to the current $index of the target repeater. Now I'm not sure which it is you're trying to target but you can store an ng-repeater's $index as another variable for access from inner repeaters using the following syntax:
<!-- outer loop -->
<div ng-repeat="(idxA, item) in items)">
<!-- inner loop -->
<div ng-repeat"(idxB, obj) in item.objs">
<ul>
<!-- another inner loop -->
<li ng-repeat="li in obj.pts">
In the above code idxA will be the same as the outer loop's $index, idxB is the inner loop's $index and so on. Then you just pass the index (e.g. idxA or idxB) to your method.
resources:
https://stackoverflow.com/a/18914958/1121919
https://docs.angularjs.org/api/ng/directive/ngRepeat
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>');
I have a two page application. 1st page takes input for creating a table and based on this inputs, a table is created on next page.
This is my first page:
This is my second page, which is created with first page inputs.
I want to delete the rows based on the selected check boxes, but it always delete the rows from last.
This is my controllers.js
$scope.tableSelection = {};
['Delete', function ($itemScope) {
//$rootscope.rows contains the number of rows given as input
for (var i = $rootScope.rows.length - 1; i >= 0; i--) {
if ($scope.tableSelection[i]) {
//delete row from data
$rootScope.rows.splice(i, 1);
//delete rowSelection property
delete $scope.tableSelection[i];
}
}
}]
This is my second html page, where i need to delete the rows based upon selection
<tbody>
<tr ng-repeat="row in rows track by $index" ng-class="{'success' : tableSelection[$index]}">
<td>
<input type="checkbox" ng-model="tableSelection[$index]">
</td>
<td ng-repeat="col in output_columns track by $index">
<enter data>
</td>
<td ng-repeat="col in input_columns track by $index">
<enter data>
</td>
</tr>
</tbody>
But Only rows from last are getting deleted and not the one selected.
Can anyone please suggest what I am missing or doing wrong.
It could be because you are providing an index value of -1. Splice will always remove the last row if the index value you pass is -1.
I'm attempting to use ng-repeat in a couple of elements on my page.
For some reason it's showing each of the n elements n times and I cannot figure out why.
My array looks something like this:
$scope.fieldNames = ["Last_Name","First_Name","Email","Home_Phone","Cell_Phone"];
I have a select box that is filling n^2 times (I have tried using ng-options but cannot get it to work with the array):
<td>
<select ng-model="currentField" style="width: 100%">
<option ng-repeat="field in fieldNames">{{field}}</option>
</select>
<td>
Additionally this happens with the header row of my table.
But not with the member rows or the cells contained within.
<table class = "main-table">
<thead>
<tr>
<th ng-repeat = "field in fieldNames">{{field}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat = "member in members" >
<td ng-repeat = "field in fieldNames">{{member[field]}}</td>
</tr>
</tbody>
</table>
If someone could please explain to me why this is happening and how to fix it I would be grateful. A working example of the ng-options would also be appreciated.
Thanks in advance for your time.
To work with a list of strings in ng-options, you need the comprehension expression looks like this
<select ng-model="currentField" ng-options="field for field in fieldNames"></select>
DEMO
So it turns out that the reason each item was repeating n times is that both my page and the layout template I was using both had
<script type = "text/javascript" src = https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"> </script>
As a result angular was apparently loading twice and running the ng-repeat on the ng-repeat, hence all the additional entries.