Filter table after click data AngularJS

Filter table after click data AngularJS - javascript

I need to filter table - after click name in the list:
<ul ng-repeat="f in filter">
<li ng-model="search.name">
<a class="left-menu-link">
{{f}}
</a>
</li>
</ul>
The table should list only that name which I chose.
My plunker: http://plnkr.co/edit/g1t4pludTTIAJYKTToCK?p=preview
// Code goes here
var app = angular.module('app', []);
app.controller('FirstCtrl', function($scope) {
$scope.data = [{
"name": "afdfg Nixon",
"system": "System Architect"
},
{
"name": "sdfasdfas",
"system": "System Architect"
},
{
"name": "ggg Nigadfgxon",
"system": "System Architect"
},
{
"name": "Tiger sdd",
"system": "System Architect"
},
{
"name": "aaa Nixon",
"system": "System Architect"
}
];
$scope.filter = [
"afdfg Nixon",
"sdfasdfas",
"ggg Nigadfgxon",
"Tiger sdd",
"aaa Nixon"
];
});
<html ng-app="app" ng-cloak>
<head>
<style>
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
display: none !important;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body ng-controller="FirstCtrl as vm">
<ul ng-repeat="f in filter">
<li ng-model="search.name">
<a class="left-menu-link">
{{f}}
</a>
</li>
</ul>
<input ng-model="search.name" />
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Name
<th>System
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="n in data | filter:search">
<td style="word-break:break-all;">{{n.name}}</td>
<td>{{n.system}}</td>
</tr>
</tbody>
</table>
</body>
</html>
Thanks for answers in advance!

You can use an ng-click on your anchor tag in the li using ng-click=onClick(f) like this:
$scope.onClick = function(name) {
$scope.search = $scope.search || {};
$scope.search.name = name;
}
See demo below and updated plunker:
var app = angular.module('app', []);
app.controller('FirstCtrl', function($scope) {
$scope.data = [{
"name": "afdfg Nixon",
"system": "System Architect"
},
{
"name": "sdfasdfas",
"system": "System Architect"
},
{
"name": "ggg Nigadfgxon",
"system": "System Architect"
},
{
"name": "Tiger sdd",
"system": "System Architect"
},
{
"name": "aaa Nixon",
"system": "System Architect"
}
];
$scope.filter = [
"afdfg Nixon",
"sdfasdfas",
"ggg Nigadfgxon",
"Tiger sdd",
"aaa Nixon"
];
$scope.onClick = function(name) {
$scope.search = $scope.search || {};
$scope.search.name = name;
}
});
<html ng-app="app" ng-cloak>
<head>
<style>
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
display: none !important;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body ng-controller="FirstCtrl as vm">
<ul ng-repeat="f in filter">
<li>
<a href="#" class="left-menu-link" ng-click=onClick(f)>{{f}}</a>
</li>
</ul>
<input ng-model="search.name" />
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Name
<th>System
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="n in data | filter:search">
<td style="word-break:break-all;">{{n.name}}</td>
<td>{{n.system}}</td>
</tr>
</tbody>
</table>
</body>
</html>

Replace this line
<tr ng-repeat="n in data | filter:search">
with
<tr ng-repeat="n in data | filter:search.name">
You are missing the name property of search
var app = angular.module('app', []);
app.controller('FirstCtrl', function($scope) {
$scope.data=[
{
"name" : "afdfg Nixon",
"system" : "System Architect"
},
{
"name" : "sdfasdfas",
"system" : "System Architect"
},
{
"name" : "ggg Nigadfgxon",
"system" : "System Architect"
},
{
"name" : "Tiger sdd",
"system" : "System Architect"
},
{
"name" : "aaa Nixon",
"system" : "System Architect"
}
];
$scope.filter=[
"afdfg Nixon",
"sdfasdfas",
"ggg Nigadfgxon",
"Tiger sdd",
"aaa Nixon"
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="FirstCtrl as vm">
<ul ng-repeat="f in filter">
<li ng-model="search.name">
<a class="left-menu-link">
{{f}}
</a>
</li>
</ul>
<input ng-model="search.name" />
<table class="table table-bordered table-striped">
<thead>
<tr>
<th >Name
<th >System
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="n in data | filter:search.name">
<td style ="word-break:break-all;">{{n.name}}</td>
<td>{{n.system}}</td>
</tr>
</tbody>
</table>
</body>

You have used controlerAs syntax in the view but in controller didn't use this variable. so firstly use this instead of $scope in controller.
Other problem is binding ng-model to li tag. you can not do this.So i just use ng-click to set search filter variable with clicke on li.
// Code goes here
var app = angular.module('app', []);
app.controller('FirstCtrl', function($scope) {
var vm = this;
vm.data = [{
"name": "afdfg Nixon",
"system": "System Architect"
},
{
"name": "sdfasdfas",
"system": "System Architect"
},
{
"name": "ggg Nigadfgxon",
"system": "System Architect"
},
{
"name": "Tiger sdd",
"system": "System Architect"
},
{
"name": "aaa Nixon",
"system": "System Architect"
}
];
vm.filter = [
"afdfg Nixon",
"sdfasdfas",
"ggg Nigadfgxon",
"Tiger sdd",
"aaa Nixon"
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="FirstCtrl as vm">
<ul ng-repeat="f in vm.filter">
<li ng-click="vm.search = f">
<a class="left-menu-link">
{{f}}
</a>
</li>
</ul>
<input ng-model="vm.search.name" />
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Name
<th>System
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="n in vm.data | filter:vm.search">
<td style="word-break:break-all;">{{n.name}}</td>
<td>{{n.system}}</td>
</tr>
</tbody>
</table>
</div>

Related

How to paginate array of array to Material Design Data Table angularjs?

I have table and i show data, with dynamic columns and data. As input data i have an array of values
here is my plunker
angular.module('plunker', ['ngMaterial','md.data.table'])
.config(['$mdThemingProvider', function ($mdThemingProvider) {
'use strict';
$mdThemingProvider.theme('default')
.primaryPalette('blue');
}])
.controller('MainCtrl', function($scope) {
var vm = $scope;
vm.test = '123';
vm.query = {
order: 'starttime',
limit: 25,
page: 1
};
vm.tabQuery = {
limit: 2,
page: 1
};
vm.data = {
"title": "Summary Reports -> manipulate",
"content": [
[
"a1s2",
"1"
],
[
"aaa",
"1"
],
[
"ccc",
"1"
],
[
"eee",
"1"
],
[
"ggg",
"1"
],
[
"iii",
"1"
],
[
"kkk",
"1"
],
[
"mmm",
"1"
],
[
"ooo",
"1"
],
[
"qqq",
"1"
],
[
"sss",
"1"
]
],
"columns": [
"name1",
"name2"
],
"transactionLogId": 432903
};
$scope.name = 'Plunker';
});
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
display: none !important;
}
h1,
p {
font-family: sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/daniel-nagy/md-data-table/master/dist/md-data-table.css">
</head>
<body ng-app="plunker" ng-cloak>
<div ng-controller="MainCtrl">
<md-toolbar class="md-table-toolbar md-default">
<div class="md-toolbar-tools" layout-align="end center">
<span class="md-subhead">Summary Report</span>
<div flex></div>
</div>
</md-toolbar>
<md-table-container md-scroll-y layout-fill layout="column" class="md-padding">
<table class="md-table" md-table md-progress="promise" style="font-size: 11px !important;">
<thead md-head>
<tr md-row>
<th md-column ng-repeat="col in data.columns track by $index"> {{ col }}</th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-repeat="val in data.content track by $index">
<td ng-repeat="el in val track by $index" md-cell ng-bind="el"></td>
</tr>
</tbody>
</table>
</md-table-container>
<md-table-pagination md-limit="3" md-boundary-links="true" md-limit-options="[5, 10, 15]" md-page="tabQuery.page" md-total="{{(data.content).length}}"></md-table-pagination>
</div>
<script src="lib/script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.2.2/angular-material.min.js"></script>
<script src="https://rawgit.com/daniel-nagy/md-data-table/master/dist/md-data-table.js"></script>
</body>
</html>
My pagination via array of array doesn't works in this table.
I'm also tried add this part to ng-repeat:
"| limitTo: query.limit : (query.page -1) * query.limit"
The problem is: there is a table in AngularJS, there are, for example, 2 columns (maybe 5 and 10, they are dynamic) and also dynamic data, I bring an array for these columns into the table, for example I took 2 columns and 11 records, brought them into the table and made them the table showed 3 items, but it shows all 11 and pagination does not seem to rob, can anyone pushed with this?

Solved, I've added | limitTo: query.limit : (query.page -1) * query.limit to <td ng-repeat="el in val track by $index" md-cell>{{ el }}</td> and deleted ng-bind="el" (changed to {{ el }}) now it works as expect

angularJS how to get index value on every row in table using ui-bootstrap pagination?

I'm using ui-bootstrap pagination, I use $index value to add a comment on every row it is working fine but on 2nd page and 3rd and so on $index value starts from 0 again. how to read index value on 2nd 3rd ... pages,
why it is taking from 0th index again in page 2 and so on. i'm passing index value in in textarea as well.
I have give code below.
var myApp = angular.module('myApp', ['ui.bootstrap'])
.controller('employeeController', function ($scope) {
var employees = [{
"Name": "Alfreds Futterkiste",
"City": "Berlin",
"Country": "Germany"
}, {
"Name": "Berglunds snabbköp",
"City": "Luleå",
"Country": "Sweden"
}, {
"Name": "Blauer See Delikatessen",
"City": "Mannheim",
"Country": "Germany"
}, {
"Name": "Blondel père et fils",
"City": "Strasbourg",
"Country": "France"
}, {
"Name": "Bólido Comidas preparadas",
"City": "Madrid",
"Country": "Spain"
}, {
"Name": "Bon app'",
"City": "Marseille",
"Country": "France"
}, {
"Name": "Bottom-Dollar Marketse",
"City": "Tsawassen",
"Country": "Canada"
}, {
"Name": "Cactus Comidas para llevar",
"City": "Buenos Aires",
"Country": "Argentina"
}, {
"Name": "Centro comercial Moctezuma",
"City": "México D.F.",
"Country": "Mexico"
}, {
"Name": "Chop-suey Chinese",
"City": "Bern",
"Country": "Switzerland"
}, {
"Name": "Comércio Mineiro",
"City": "São Paulo",
"Country": "Brazil"
}];
$scope.employees=employees;
$scope.showHideAddNotes = function (vendorsId, $index) {
$scope.comments = vendorsId;
angular.forEach($scope.employees, function (vendr) {
if (vendr.VendID == $scope.comments) {
$scope.showComment = true;
}
})
}
$scope.pageSize = 10;
$scope.currentPage = 1;
$scope.itemsPerPage = $scope.pageSize;
$scope.maxSize = 5; //Number of pager buttons to show
$scope.totalItems = $scope.employees.length;
$scope.setPage = function (pageNo) {
$scope.currentPage = pageNo;
};
$scope.pageChanged = function () {
console.log('Page changed to: ' + $scope.currentPage);
};
$scope.setItemsPerPage = function (num) {
$scope.itemsPerPage = num;
$scope.currentPage = 1; //reset to first page
}
$scope.showHideAddNotes = function (index) {
alert(index);
$scope.employees[index].showComment = !$scope.employees[index].showComment;
}
$scope.addNote = function (vendkey, index) {
var notes = APService.SaveVendorComment($('#txtVendorNote' + index).val(), vendkey).responseJSON;
$scope.employees[index].showComment = !$scope.employees[index].showComment;
}
})
.textarea-container {
position: relative;
}
.textarea-container textarea {
width: 100%;
height: 100%;
box-sizing: border-box;
}
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<body ng-app="myApp">
<div ng-controller="employeeController">
<div class="container" style="margin-top:40px;">
<div class="row">
<div style="text-align: center">
<ul uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" items-per-page="itemsPerPage" direction-links="true" max-size="maxSize" class="pagination" boundary-links="true" rotate="false" num-pages="numPages"></ul>
</div>
<div class="col-md-12">
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody >
<tr ng-repeat="emp in employees.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage)) ">
<td>{{emp.Name}}<br>
<div>
<a href="#" ng-click="showHideAddNotes($index)">
<img src="http://icongal.com/gallery/image/43850/notes_add.png" />
</a>
</div>
<div class="textarea-container" ng-model="commentsArea" ng-show="emp.showComment">
<div style="margin-bottom:5px;">
<textarea id="txtVendorNote{{$index}}" ng-modal="inputvendor" name="foo" placeholder="Add comments here..."></textarea>
</div>
<button class="btn btn-danger btn-sm" style="padding:2px 10px 2px 10px" ng-click="addNote(vendor.VendKey,$index)">Save</button>
</div>
</td>
<td>{{emp.City}}</td>
<td>{{emp.Country}}</td>
</tr>
</tbody>
</table>
</div>
<div style="text-align: center">
<ul uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" items-per-page="itemsPerPage" direction-links="true" max-size="maxSize" class="pagination" boundary-links="true" rotate="false" num-pages="numPages"></ul>
</div>
</div>
</div>
</div>
</body>

The $index is actually the index of visible elements. You can get the real index like this.
index += ($scope.currentPage - 1) * $scope.itemsPerPage;
Working Snippet:
var myApp = angular.module('myApp', ['ui.bootstrap'])
.controller('employeeController', function($scope) {
var employees = [{
"Name": "Alfreds Futterkiste",
"City": "Berlin",
"Country": "Germany"
}, {
"Name": "Berglunds snabbköp",
"City": "Luleå",
"Country": "Sweden"
}, {
"Name": "Blauer See Delikatessen",
"City": "Mannheim",
"Country": "Germany"
}, {
"Name": "Blondel père et fils",
"City": "Strasbourg",
"Country": "France"
}, {
"Name": "Bólido Comidas preparadas",
"City": "Madrid",
"Country": "Spain"
}, {
"Name": "Bon app'",
"City": "Marseille",
"Country": "France"
}, {
"Name": "Bottom-Dollar Marketse",
"City": "Tsawassen",
"Country": "Canada"
}, {
"Name": "Cactus Comidas para llevar",
"City": "Buenos Aires",
"Country": "Argentina"
}, {
"Name": "Centro comercial Moctezuma",
"City": "México D.F.",
"Country": "Mexico"
}, {
"Name": "Chop-suey Chinese",
"City": "Bern",
"Country": "Switzerland"
}, {
"Name": "Comércio Mineiro",
"City": "São Paulo",
"Country": "Brazil"
}];
$scope.employees = employees;
$scope.showHideAddNotes = function(vendorsId, $index) {
$scope.comments = vendorsId;
angular.forEach($scope.employees, function(vendr) {
if (vendr.VendID == $scope.comments) {
$scope.showComment = true;
}
})
}
$scope.pageSize = 10;
$scope.currentPage = 1;
$scope.itemsPerPage = $scope.pageSize;
$scope.maxSize = 5; //Number of pager buttons to show
$scope.totalItems = $scope.employees.length;
$scope.setPage = function(pageNo) {
$scope.currentPage = pageNo;
};
$scope.pageChanged = function() {
console.log('Page changed to: ' + $scope.currentPage);
};
$scope.setItemsPerPage = function(num) {
$scope.itemsPerPage = num;
$scope.currentPage = 1; //reset to first page
}
$scope.showHideAddNotes = function(index) {
index += ($scope.currentPage - 1) * $scope.itemsPerPage;
alert(index);
$scope.employees[index].showComment = !$scope.employees[index].showComment;
}
$scope.addNote = function(vendkey, index) {
var notes = APService.SaveVendorComment($('#txtVendorNote' + index).val(), vendkey).responseJSON;
$scope.employees[index].showComment = !$scope.employees[index].showComment;
}
})
.textarea-container {
position: relative;
}
.textarea-container textarea {
width: 100%;
height: 100%;
box-sizing: border-box;
}
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<body ng-app="myApp">
<div ng-controller="employeeController">
<div class="container" style="margin-top:40px;">
<div class="row">
<div style="text-align: center">
<ul uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" items-per-page="itemsPerPage" direction-links="true" max-size="maxSize" class="pagination" boundary-links="true" rotate="false" num-pages="numPages"></ul>
</div>
<div class="col-md-12">
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="emp in employees.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage)) ">
<td>{{emp.Name}}<br>
<div>
<a href="#" ng-click="showHideAddNotes($index)">
<img src="http://icongal.com/gallery/image/43850/notes_add.png" />
</a>
</div>
<div class="textarea-container" ng-model="commentsArea" ng-show="emp.showComment">
<div style="margin-bottom:5px;">
<textarea id="txtVendorNote{{$index}}" ng-modal="inputvendor" name="foo" placeholder="Add comments here..."></textarea>
</div>
<button class="btn btn-danger btn-sm" style="padding:2px 10px 2px 10px" ng-click="addNote(vendor.VendKey,$index)">Save</button>
</div>
</td>
<td>{{emp.City}}</td>
<td>{{emp.Country}}</td>
</tr>
</tbody>
</table>
</div>
<div style="text-align: center">
<ul uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" items-per-page="itemsPerPage" direction-links="true" max-size="maxSize" class="pagination" boundary-links="true" rotate="false" num-pages="numPages"></ul>
</div>
</div>
</div>
</div>
</body>

var app = angular.module("myApp", ["ui.bootstrap"]);
app.controller("MainCtrl", function($scope) {
var allData =
[your data goes here];
$scope.totalItems = allData.length;
$scope.currentPage = 1;
$scope.itemsPerPage = 5;
$scope.$watch("currentPage", function() {
setPagingData($scope.currentPage);
});
function setPagingData(page) {
var pagedData = allData.slice(
(page - 1) * $scope.itemsPerPage,
page * $scope.itemsPerPage
);
$scope.aCandidates = pagedData;
}
});
<link data-require="bootstrap-css#*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script data-require="ui-bootstrap#*" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>
<div ng-app="myApp">
<div ng-controller="MainCtrl">
<table id="mytable" class="table table-striped">
<thead>
<tr class="table-head">
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in aCandidates">
<th>
<div>{{person}}</div>
</th>
</tr>
</tbody>
</table>
<uib-pagination total-items="totalItems" ng-model="currentPage" items-per-page="itemsPerPage"></uib-pagination>
</div>
</div>

ng repeat with <li> within a <td>

I am trying to put a list li inside a row of a table using ng repeat.
My code below of what I am trying to achieve:
<td>
<div ng-repeat="x in total.count">
<ul>
<li>
{{x.key}}
</li>
</ul>
</div>
</td>
A sample of total:
"total": {
"doc_count_error_upper_bound": 0,
"sum_other_doc_count": 0,
"count": [
{
"key": "0",
"doc_count": 83714
},
{
"key": "1",
"doc_count": 11034
}
The issue is that nothing is appearing. But when I hard code the li, it works.
Can somebody advise me on how to do it in angularjs using ng-repeat ?

Try this:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.object = {"total": {
"doc_count_error_upper_bound": 0,
"sum_other_doc_count": 0,
"count": [
{
"key": "0",
"doc_count": 83714
},
{
"key": "1",
"doc_count": 11034
}]
}};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<table border=1>
<tr>
<td>
<ul>
<li ng-repeat="x in object.total.count">
{{x.key}}
</li>
</ul>
</td>
</tr>
</table>
</div>

Try and use the ng-repeat on the li element, the ng-repeat makes a "copy" of the element its placed in. So this will repeat the list item element.
<td>
<ul>
<li ng-repeat="x in total.count">
{{x.key}}
</li>
</ul>
</td>

You are repeating a list with one element, not the element itself

using ng-repeat inside another ng-repeat

I'm developing a page where I need to show some boxes (using ng-repeat) that contains info of channels and where it will be shown (which are cities).
The problem I am facing is when I repeat the second ng-repeat:
<table class="table table-condensed" ng-init="nitsCh = [objsCh[$index].nit]">
This should get the $index of first ng-repeat and create a new array with the places the channels will be shown. And it does exactly that. But, when I apply the second ng-repeat using this array, it doesn't work properly.
Said that my html looks like this (PS: I need to use the index value instead of objCh.name because I place these boxes into columns)
<div class="box box-solid box-default" ng-repeat="(indexO, objCh) in objsCh track by indexO" ng-if="indexO%4==0 && indexO<=10">
<div class="box-header">
<div class="pull-left">
<img src="dist/img/channels/{{ objsCh[indexO].pic }}" data-toggle="tooltip" title="" data-original-title="Alterar logo do canal">
<h3 class="box-title">{{ objsCh[(indexO)].name }}</h3>
</div>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-toggle="tooltip" title="" data-original-title="Adicionar ou Remover NIT"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="box-body">
<table class="table table-condensed" ng-init="nitsCh = [objsCh[indexO].nit]">
<tbody>
<tr>
<th style="width: 10px">#</th>
<th>Nit</th>
</tr>
<tr ng-repeat="(indexN,nitCh) in nitsCh track by indexN">
<td>{{ objsCh[(indexO + 1)].nit[indexN].num }}</td>
<td>{{ objsCh[(indexO + 1)].nit[indexN].name }}</td>
</tr>
</tbody>
</table>
</div>
</div>
The JS file looks like this:
var app = angular.module('appApp', []);
app.controller('ctrlApp', function($scope, $http) {
var url = "includes/exibChNit.php";
$http.get(url).success(function(response) {
all = response;
$scope.objsCh = all.channels;
});
});
And the json file (that php create) looks like this:
{
"channels": [{
"id": "1",
"sid": "1",
"name": "Channel",
"pic": "channel.jpg",
"crc32": "A1g423423B2",
"special": "0",
"url": "",
"key": "",
"type": "",
"city": [{
"num": "1",
"name": "S�o Paulo"
}, {
"num": "2",
"name": "Rio de Janeiro"
}]
}, {
"id": "2",
"sid": "2",
"name": "CHannel 1",
"pic": "channel.jpg",
"crc32": "A1F5534234B2",
"special": "0",
"url": "",
"key": "",
"type": "",
"city": [{
"num": "1",
"name": "S�o Paulo"
}, {
"num": "2",
"name": "Rio de Janeiro"
}]
}]
}
When I try this it works:
<table class="table table-condensed" ng-init="nitsCh = [objsCh[($parent.$index + 1)].nit]">
But I can't make it this way because the json nodes will be dynamic.
Thanks in advance!

ng-repeat's create their own $scope.
So, for the inner ng-repeats, you have access to $parent.$index, where $parent is the parent scope of the current repeat block.
For ex:
<ul ng-repeat="section in sections">
<li>
{{section.name}}
</li>
<ul>
<li ng-click="loadFromMenu($parent.$index)" ng-repeat="tutorial in section.tutorials">
{{tutorial.name}}
</li>
</ul>
</ul>
Plunkr http://plnkr.co/edit/hOfAldNevxKzZQlxFfBn?p=preview
(simplified from this answer passing 2 $index values within nested ng-repeat)

Filters not working - Angularjs

I have been studying some of the videos for angularjs. While trying to apply filter to a list of bookmark category my main content simply doesn't loads. I have not implemented view as of now. And I would like my code to be without views for a moment.
The filter line is problematic as when I remove the curly braces around. The bookmark lists does shows up but the filtering still not works !
Please let me know what is the correction which needs to be done ?
Here is my code for INDEX.HTML
<!doctype html>
<html ng-app="Eggly">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Eggly</title>
<link rel="stylesheet" href="assets/css/normalize.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/eggly.css">
<link rel="stylesheet" href="assets/css/animations.css">
</head>
<body ng-controller='MainCtrl'>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<img class="logo" src="assets/img/eggly-logo.png">
<ul class="nav nav-sidebar">
<li ng-repeat="category in categories">
{{category.name}}
</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div ng-repeat="bookmark in bookmarks | filter:{category:currentCategory.name}">
<button type="button" class="close">×</button>
<button type="button" class="btn btn-link"><span class="glyphicon glyphicon-pencil"></span></button>
{{bookmark.title}}
</div>
<hr/>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="app/eggly-app.start.js"></script>
</body>
JS FILE
angular.module('Eggly', [
])
.controller('MainCtrl', function($scope){
$scope.categories = [
{"id": 0, "name": "Development"},
{"id": 1, "name": "Design"},
{"id": 2, "name": "Exercise"},
{"id": 3, "name": "Humor"}
];
$scope.bookmarks= [
{"id":0, "title": "AngularJS", "url": "http://angularjs.org", "category": "Development" },
{"id":1, "title": "Egghead.io", "url": "http://angularjs.org", "category": "Development" },
{"id":2, "title": "A List Apart", "url": "http://alistapart.com/", "category": "Design" },
{"id":3, "title": "One Page Love", "url": "http://onepagelove.com/", "category": "Design" },
{"id":4, "title": "MobilityWOD", "url": "http://www.mobilitywod.com/", "category": "Exercise" },
{"id":5, "title": "Robb Wolf", "url": "http://robbwolf.com/", "category": "Exercise" },
{"id":6, "title": "Senor Gif", "url": "http://memebase.cheezburger.com/senorgif", "category": "Humor" },
{"id":7, "title": "Wimp", "url": "http://wimp.com", "category": "Humor" },
{"id":8, "title": "Dump", "url": "http://dump.com", "category": "Humor" }
];
$scope.currentCategory = null;
function setCurrentCategory(category) {
$scope.currentCategory = category;
}
$scope.currentCategory = setCurrentCategory;
});

A few errors there must me fixed in your code.
Please attach .setCurrentCategory() to $scope (or this) in controller as Angular realize MVVM architecture. $scope is an object that links your controllers with views. As long as you want to interact with data from controller by method setCurrentCategory you must assign it to $scope
Filters - according to AngularJS documentation need expression – not curly brackets
angular.module('Eggly', [])
.controller('MainCtrl', function($scope) {
$scope.categories = [{
"id": 0,
"name": "Development"
}, {
"id": 1,
"name": "Design"
}, {
"id": 2,
"name": "Exercise"
}, {
"id": 3,
"name": "Humor"
}];
$scope.bookmarks = [{
"id": 0,
"title": "AngularJS",
"url": "http://angularjs.org",
"category": "Development"
}, {
"id": 1,
"title": "Egghead.io",
"url": "http://angularjs.org",
"category": "Development"
}, {
"id": 2,
"title": "A List Apart",
"url": "http://alistapart.com/",
"category": "Design"
}, {
"id": 3,
"title": "One Page Love",
"url": "http://onepagelove.com/",
"category": "Design"
}, {
"id": 4,
"title": "MobilityWOD",
"url": "http://www.mobilitywod.com/",
"category": "Exercise"
}, {
"id": 5,
"title": "Robb Wolf",
"url": "http://robbwolf.com/",
"category": "Exercise"
}, {
"id": 6,
"title": "Senor Gif",
"url": "http://memebase.cheezburger.com/senorgif",
"category": "Humor"
}, {
"id": 7,
"title": "Wimp",
"url": "http://wimp.com",
"category": "Humor"
}, {
"id": 8,
"title": "Dump",
"url": "http://dump.com",
"category": "Humor"
}];
$scope.currentCategory = null;
function setCurrentCategory(category) {
$scope.currentCategory = category;
}
$scope.setCurrentCategory = setCurrentCategory;
});
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='Eggly'>
<div ng-controller='MainCtrl'>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li ng-repeat="category in categories">
{{category.name}}
</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div ng-repeat="bookmark in bookmarks | filter:currentCategory.name">
<button type="button" class="close">×</button>
<button type="button" class="btn btn-link"><span class="glyphicon glyphicon-pencil"></span>
</button>
{{bookmark.title}}
</div>
<hr/>
</div>
</div>
</div>
</div>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

Filter table after click data AngularJS - javascript

Related

How to paginate array of array to Material Design Data Table angularjs?

angularJS how to get index value on every row in table using ui-bootstrap pagination?

ng repeat with <li> within a <td>

using ng-repeat inside another ng-repeat

Filters not working - Angularjs

Categories

Resources