This question already has answers here:
How to get the index of an parent scope array/ng-repeat inside child ng-repeat
(3 answers)
Closed 8 years ago.
I am trying to limit a sub repeat by the index of its parent repeat. So whaever level index it on it will be limited to that (+ 1 so we dont start at 0). Here is my thinking -
<div class="inputRepeater" ng-repeat="face in inputFaces" ng-show="face.isCurrent" >
<div class="trialGrid">
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="(key, val) in rowCollection[0]">{{key}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection | limitTo: face.$index + 1">
<td ng-repeat="item in row">{{item}}</td>
</tr>
</tbody>
</table>
</div>
</div>
So the tr inside the table would be limited to the initial repeat of face, buy faces $index + 1. This is not working. Any insight would be much appreciated. Thanks!
You can use ng-init to save a reference to the upper $index
<div class="inputRepeater" ng-repeat="face in inputFaces" ng-show="face.isCurrent" >
<div class="trialGrid" ng-init="$faceIndex = $index">
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="(key, val) in rowCollection[0]">{{key}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection | limitTo: $faceIndex + 1">
<td ng-repeat="item in row">{{item}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Instead of face.$index use $parent.$index because you want to refer parent ng-repeat $index.
Because ng-repeat creates an isolated scope from its current running scope.
CODE
<div class="inputRepeater" ng-repeat="face in inputFaces" ng-show="face.isCurrent">
<div class="trialGrid">
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="(key, val) in rowCollection[0]">{{key}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection | limitTo: $parent.$index + 1">
<td ng-repeat="item in row">{{item}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Hope this would be helpful to you.
Related
I want to create a table that look like that:
|¯¯¯¯|¯¯¯¯|¯¯¯¯|¯¯¯¯|¯¯¯¯|
|¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯|
|¯¯¯¯|¯¯¯¯|¯¯¯¯|¯¯¯¯|¯¯¯¯|
|¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯|
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
with angular, using ng-repeat.
I tried to do it with this html but it doesn't work.
<div ng-controller="MyCtrl">
<table>
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
</tr>
</thead>
<tbody>
<div ng-repeat="item in items">
<tr>
<td>{{item.val1}}</td>
<td>{{item.val2}}</td>
<td>{{item.val3}}</td>
<td>{{item.val4}}</td>
<td>{{item.val5}}</td>
</tr>
<tr>
<td colspan="5">QWERTY</td>
</tr>
</div>
</tbody>
</table>
</div>
You can use ng-repeat-start and ng-repeat-end when you can't accomplish what you're after by placing ng-repeat on a single element. Something like:
<tbody>
<tr ng-repeat-start="item in items">
<td>{{item.val1}}</td>
<td>{{item.val2}}</td>
<td>{{item.val3}}</td>
<td>{{item.val4}}</td>
<td>{{item.val5}}</td>
</tr>
<tr ng-repeat-end>
<td colspan="5">QWERTY</td>
</tr>
</tbody>
I got table with checkboxes but I don't know how to do something while checkbox is checked.
<md-table-container>
<table md-table md-row-select multiple ng-model="selected" md-progress="promise">
<thead md-head>
<tr md-row>
<th md-column></th>
<th md-column>ID</th>
<th md-column>Username</th>
</tr>
</thead>
<tbody md-body>
<tr md-row md-select="user" md-select-id="id" md-auto-select ng-repeat="user in users">
<td md-cell></td>
<td md-cell><span>{{ user.id }}</span></td>
<td md-cell>{{ user.username }}</td>
</tr>
</tbody>
</table>
</md-table-container>
How Can I check that checkbox is checked and do something?
add $scope.$watch on the variable that you are interested in (or watchcollection)
https://docs.angularjs.org/api/ng/type/$rootScope.Scope
Do not forget that variable you are watching is in $scope and propagation of variable into ng-if scopes happen by copying not reference. You can wrap variable into some container object, otherwise changes will happen in another scope and you never notice them.
I have a table with one of the columns showing datetime value. I am using angularjs ngtable module.
<div ng-controller="TestCtrl" class="container">
<table ng-table="tableParams" class="table table-bordered">
<thead>
<tr>
<th>name</th>
<th>date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="test in $data">
<td data-title="'name'" >
{{test.name}}
</td>
<td data-title="'remarks'">
{{test.date}}
</td>
</tr>
</tbody>
</table>
</div>
An example of {{test.date}} looks something like 2015-12-08T16:00:00.000Z. I would like to convert it to Dec08 16:00:00. How can this be done in angularjs?
yes, in Angular doc you have examples: Link
try something like: {{test.name | date:'MMMdd HH:mm:ss'}}
Essentially I need to add a little button or something within the headers of the table to be able to sort the data alphabetically by column. I've been having trouble with doing this making use of AngularJS and need some help with it.
This is a snippet showing the table and...
<div class="col-md-10">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>Status</th>
<th>Ref</th>
<th>Service</th>
<th>Domain</th>
<th>Service Owner</th>
<th>Stage</th>
</tr>
</thead>
<tbody>
<tr ng-click="isCollapsed = !isCollapsed" ng-repeat-start="x in projects | filter:query | filter:myFilter | orderBy:orderProp">
<td><b>{{x.a}}</b></td>
<td>{{x.b}}</td>
<td><u>{{x.c}}</u></td>
<td>{{x.d}}</td>
<td>{{x.e}}</td>
<td>{{x.f}}</td>
</tr>
<tr collapse="isCollapsed" ng-repeat-end="">
<td colspan="6">
<h3>Test</h3>
<p>Test</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
This is a plnkr of the code http://plnkr.co/edit/OkRbR9geeOcCGy2K01jB?p=preview
Give this a try for a very simple solution:
HTML:
<table>
<thead>
<tr>
<th>Status<a ng-click="orderProperty = 'a'">^</a></th>
<th>Ref<a ng-click="orderProperty = 'b'">^</a></th>
<th>Service<a ng-click="orderProperty = 'c'">^</a></th>
<th>Domain<a ng-click="orderProperty = 'd'">^</a></th>
<th>Service Owner<a ng-click="orderProperty = 'e'">^</a></th>
<th>Stage<a ng-click="orderProperty = 'f'">^</a></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in projects | orderBy:orderProperty">
<td><b>{{x.a}}</b></td>
<td>{{x.b}}</td>
<td>{{x.c}}</td>
<td>{{x.d}}</td>
<td>{{x.e}}</td>
<td>{{x.f}}</td>
</tr>
</tbody>
</table>
JavaScript:
app.controller('controller', function($scope) {
$scope.orderProperty = "f"; // Sort by "f" by default
$scope.projects = [...];
});
Working jsFiddle here: http://jsfiddle.net/ben1729/3nxykbhk/
I'm stuck in getting parent ng-repeat value using child ng-repeat slug. It shows nothing just blank td's
What I've done
$scope.column = [column_id: "12"slug: "item6"sort: "0"status: "1"title: "Contact no"ts_datetime: "2014-12-12 12:27:50"];
$scope.column.item = [item1: "1"item2: "2"item3: "3"item4: "4"item5: "5"item6: "8"item_id: "1"status: "1"]
<table class="table table-bordered table-striped">
<thead>
<tr>
<th ng-repeat="column in columns" >{{ column.title }}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in listings">
<td ng-repeat="column in columns" ng-init="val = item.column.slug">{{ val }}</td>
</tr>
</tbody>
</table>
What I want is this. to get the value of item with the slug of column. Like item.column.slug
It looks like you want to use:
<td ng-repeat="column in columns">{{item[column].slug}}</td>