We Keep Coding

how to count items in nested ng-repeat without $index

I want to count iteration of ng-repeat, when condition match.
I've tried $index but it print for all itration/items in nested ng-repeat
Fiddle link :https://jsfiddle.net/gdr7p1zj/1/
<tbody ng-controller="MainCtrl">
<tr ng-repeat-start="a in test1">
<td>{{a.categoryName}}(count_here)</td>
</tr>
<tr ng-repeat-end ng-repeat="b in test" ng-if="a.categoryId==b.categoryId">
<td>{{b.name}}</td>
</tr>
</tbody>
i want like this
category_one(4) <=item count 4 items in this category so 4 will display
item1
item2
item3
item4
category_two(2)
item5
item6
<!-- this is in controller -->
$scope.test1=[{
categoryId:'1',categoryName:'category one'
},
{
categoryId:'2',categoryName:'category two'
}]
$scope.test = [
{categoryId:'1',name:'cate 1 elem0'},
{categoryId:'1',name:'cate 1 elem1'},
{categoryId:'2',name:'cate 2 elem'}
];
});

An option is to create a function (getCount) in the controller which do the count, something like this:
$scope.getCount = function(categoryId) { // returns the count by matching by categoryId
return $scope.test.filter(function(element) { // first, filter elements in `test`
return element.categoryId === categoryId; // matching by categoryId
}).length; // then, return the count of how many results we got after the filter
}
And in the html call that function like this:
<tbody ng-controller="MainCtrl">
<tr ng-repeat-start="a in test1">
<td>{{a.categoryName }} ({{getCount(a.categoryId)}})</td> <!-- <-- call the function in order to display the count -->
</tr>
<tr ng-repeat-end ng-repeat="b in test" ng-if="a.categoryId == b.categoryId">
<td>{{b.name}}</td>
</tr>
</tbody>
See a demo here: https://jsfiddle.net/lealceldeiro/v9gj1ok4/11/

Thanks for your help. But i get expected output without any functions call or filters
Here fiddle Link: https://jsfiddle.net/wk3nzj96/
htmlCode:
<div ng-app='myapp' >
<div ng-controller="MainCtrl">
<table ng-init="$scope.counter=0">
<tr ng-repeat-start="cate in mainCategory">
<td> {{cate.name}} ({{$scope.counter[$index]}})</td></tr>
<tr ng-repeat="itemsItr in items" ng-init="$scope.counter[$parent.$parent.$index]=$scope.counter[$parent.$parent.$index]+1" ng-if="itemsItr.mid==cate.id">
<td>{{itemsItr.name}}</td>
</tr>
<tr ng-repeat-end ng-if="false"></tr>
</table>
</div>
</div>
and ControllerCode:
(function() {
angular.module('myapp', []).controller('MainCtrl', function($scope) {
$scope.mainCategory = [
{ name: "categoryOne",id:1 },
{ name: "categoryTwo",id:2 }
];
$scope.items = [
{ name: "item1FromCateOne" ,mid:1 },
{ name: "item2FromCateOne",mid:1 },
{ name: "item3FromCateOne" ,mid:1 },
{ name: "item1FromCateTwo",mid:2 }
];
});
Is this Standard way to do this?

Remove a row on ng-click using angularJs

I have a table with the default empty row(Row further includes a columns with different functionalities).Dynamically a multiple rows can be added by click of a button as per the requirement.i want to remove a row when i click a remove-icon from the same-row(remove-icon included in one of the column).
<td class="text-right"> <a href="" class="remove-service" ng-click="vm.removeService(service,true)">
<img src="images/delete.png"></a>  </td>
i have a above column to be included in all rows.whenever i click on remove-icon from any of the rows.(i want to remove a particular row from which icon is clicked)
vm.removeService = function (service, removeService) {
}
Here,is the ng-repeat code for the row.
<tr class="bx--table-row" ng-repeat="service in vm.servicesWithCountries track by $index">
vm.servicesWithCountries = [{ serviceName:"", countries: []}];

Hi you can do like below : Assuming your ng-repeat object will be like somewhat mention below.
<table>
<tr ng-repeat="item in items | orderBy: 'id'">
<td>
<span>
Hello, {{item.name}}!
</span>
</td>
<td>
Delete
</td>
</tr>
</table>
and in Controller :
$scope.items = [{
name: 'item 1',
id: '4'
}, {
name: 'item 2',
id: '3'
}, {
name: 'item 3',
id: '2'
}, {
name: 'item 4',
id: '1'
}];
$scope.delete = function(item) {
$scope.items.splice($scope.items.indexOf(item), 1);
}
refer this fiddle for complete code

You can use splice and indexOf on your service
<tr class="bx--table-row" ng-repeat="service in vm.servicesWithCountries track by $index">
<td class="text-right"> <a href="" class="remove-service"
ng-click="vm.removeService(service, true)">
<img src="images/delete.png"></a>  </td>
</tr>
Like:
ng-click="vm.removeService(service,true)"
JS
vm.removeService = function(service, removeService) {
if(removeService === true){
var index = vm.servicesWithCountries.indexOf(service);
vm.servicesWithCountries.splice(index, 1);
}
}

how to pass an object in a directive to avoid duplicated result

hey everyone sorry to bother you all , i have trouble understanding some directive i want to display 2 element in one tooltip when i write it like this :
<div ng-repeat="xx in dev.validationdvd"> Validé </div>
this this my full code below :
<table class="table table-bordered" >
<thead><tr class="infoti" >
<th>Id Dev</th>
<th>Nom Dev </th>
<th>Nom Ecu</th>
<th>Etat</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr dir-paginate=" dev in devs | itemsPerPage:7 track by $index ">
<td >{{dev.id}}</td>
<td>{{dev.nomdev}}</td>
<td >{{dev.ecu.nomEcu}}</td>
<td ng-if="dev.validationdvd[0].etatvalid == 'Validé' ">** <div ng-repeat="xx in dev.validationdvd"> Validé </div>**</td>
<td ng-if="dev.validationdvd[0].etatvalid != 'Validé' ">Non Validé</td>
<td><button class="btn btn-gray" ng-click="displaydata(dev.id)" data-toggle="modal" data-target="#myModal" >Validé</button></td>
</tr>
</tbody>
</table>
here's what i got when you pass the mass each Validé has a value
but i want the tow of them in just one tooltip not every one will display value
here's my data format
{
id: 16633,
nomdev: "AUTORADIO RADIO_VD45",
ecu: {
nomEcu: "RADIO_VD45"
},
validationdvd: [
{
etatvalid: "Validé",
vehid: {
model: "A6 I"
}
},
{
etatvalid: "Validé",
vehid: {
model: "A3 I"
}
}
]
}
and finaly this the directive of the tooltip that i've been struggling to change it and to pass my data through but i couldn't understand how it works because using ng-repeat will always duplicate the data:
app.directive('tooltip', function () {
return {
restrict:'A',
link: function(scope, element, attrs)
{
$(element)
.attr('title',scope.$eval(attrs.tooltip))
.tooltip({placement: "right"});
}
}
})
does anyone have an idea how can i pass my selected data so i can display all the data in the tooltip , thank you

Nested ng-repeat-start / ng-repeat-end

ng-repeat-start / ng-repeat-end are used for looping through data without rendering parent element [Portal to Docs]. In my case, I want to display data in nested ng-repeat-start / ng-repeat-end blocks without extra elements.
I've tried to put two ng-repeat-start directives into the same element but it fails to display correctly. I somehow figured out a workaround as displayed below [Portal to Demo]. Any better solution for case like this?
data
[{
name: 'Chapter 1',
sections: [{
name: '1-1',
words: 1024
}, {
name: '1-2',
words: 512
}]
}, {
name: 'Chapter 2',
sections: [{
name: '2-1',
words: 2048
}, {
name: '2-2',
words: 256
}]
}]
html
<tr class="tr-for" ng-repeat-start="chapter in main.book"></tr>
<tr ng-repeat-start="section in chapter.sections" ng-repeat-end>
<td>{{chapter.name}}</td>
<td>{{section.name}}</td>
<td>{{section.words}}</td>
</tr>
<tr class="tr-end" ng-repeat-end></tr>
css
tr.tr-for,
tr.tr-end {
display: none;
}

Your internal ng-repeat should be the regular ngRepeat:
<tr class="tr-for" ng-repeat-start="chapter in main.book"></tr>
<tr ng-repeat="section in chapter.sections">
<td>{{chapter.name}}</td>
<td>{{section.name}}</td>
<td>{{section.words}}</td>
</tr>
<tr class="tr-end" ng-repeat-end></tr>
Update
Try use the first ngRepeat inside of tbody tag:
<tbody ng-repeat="chapter in main.book">
<tr ng-repeat-start="section in chapter.sections" ng-repeat-end>
<td>{{chapter.name}}</td>
<td>{{section.name}}</td>
<td>{{section.words}}</td>
</tr>
</tbody>

Ember.js {{#each}} table searching, partial viewing and sorting

Thanks in advance for the help. I am pretty new to ember.js, but have setup a basic site that has a few pages with tables that loop through my data. These tables are going to be over 100 rows and have images in each row, so I would like some sort pagination or a partial view so as they scroll it loads (preferred solution). I also want the ability to search the table.
I have used datatables.js before, and that would solve most of my problems, but I am not sure if that would be the best solution with ember because it is not able to just grab the table like it normally does.
I am kind of looking for a direction and what other people may think is the best solution. Any links, or plugins, or example code or whatever would be very helpful. Here are some snippets of my code, just a super basic site:
Index Table
<table class="prdtTable table-striped table-bordered table-hover">
<thead>
<tr>
<th>Title</th>
<th>Demo</th>
<th class="tdLeft">Price</th>
<th>Description</th>
<th># of Columns</th>
</tr>
</thead>
<tbody>
{{#each}}
<tr>
<td class="noWrap">{{#link-to 'theme' this}}{{title}}{{/link-to}}</td>
<td>{{#link-to 'theme' this}}<img {{bind-attr src="image"}} \>{{/link-to}}</td>
<td class="tdCenter">{{price}}</a></td>
<td>{{description}}</td>
<td class="tdCenter">{{columns}}</td>
</tr>
{{/each}}
</tbody>
</table>
Free Page Table
<table class="prdtTable table-striped table-bordered table-hover">
<thead>
<tr>
<th>Title</th>
<th>Demo</th>
<th>Description</th>
<th># of Columns</th>
</tr>
</thead>
<tbody>
{{#each}}
{{#if free}}
<tr>
<td class="noWrap">{{#link-to 'theme' title}}{{title}}{{/link-to}}</td>
<td>{{#link-to 'theme' this}}<img {{bind-attr src="image"}} \>{{/link-to}}</td>
<td>{{description}}</td>
<td class="tdCenter">{{columns}}</td>
</tr>
{{/if}}
{{/each}}
</tbody>
</table>
Index Route
App.IndexRoute = Ember.Route.extend({
model: function() {
return App.PRODUCTS;
}
});
Product Route
App.ProductRoute = Ember.Route.extend({
model: function(params) {
return App.PRODUCTS.findBy('title', params.title);
}
});
Product Array
App.PRODUCTS = [
{
title: 'Title 1',
price: '$0',
free: true,
description: 'long description',
columns: 1,
image: 'images/image.jpg'
},
{
title: 'Title 2',
price: '$0',
free: true,
description: 'Description 2',
columns: 3,
image: 'images/image.jpg'
},
...
Thank you very much for the help! I really appreciate it!
David B