AngularJS : ng-repeat orderby error in custom directive - javascript

I have a directive that creates a list, I'm trying to get the column sorting to work, so I created another directive for sorting the columns.
I get this error in the console while I'm trying to set up an orderby filter on that list:
http://errors.angularjs.org/1.2.0rc1/$injector/unpr?p0=orderbyFilterProvider
here's my plunker: http://plnkr.co/edit/SiBDuylEv1LUCuWCv5Ep?p=preview
here's where the orderby is:
<table>
<tr>
<th ng-repeat="column in columns">
<sort-by onsort="onSort" sortdir=filterCriteria.sortDir sortedby=filterCriteria.sortedBy sortvalue="{{column.value}}">{{column.title}}</sort-by>
</th>
</tr>
<tr ng-repeat="item in set | orderby:sortBy:reverse" ng-class="getClass(item)" ng-click="selectItem(item,$event,$index)" ng-dblclick="details(item)">
<td ng-repeat="column in columns">{{item[column.value]}}</td>
</tr>
</table>

Related

I'm having issues getting AngularJS to display my table correctly

I have an object that looks like this:
[{'name':'Mike', 'age':21},
{'name':'Joe', 'age':24}]
My angular/html code looks like this:
<table class="Names">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tbody>
<tr ng-repeat-start="value in msg.object">
<td rowspan="2">{{value.name}}</td>
</tr>
<tr ng-repeat-end ng-repeat="value in msg.object">
<td>{{value.age}}</td>
</tr>
</tbody>
</table>
The names show up fine and vertically how i'd want them to be in the table (first column),
but for each value of name i get both of the ages displaying instead of just the age for that person.
Can anyone guide me in the right direction here? I feel like I'm close but just picked up angular today so I'm new to it and ng-repeat.
You only need a simple row repeat with 2 cells in each row
<tr ng-repeat="value in msg.object">
<td>{{value.name}}</td>
<td>{{value.age}}</td>
</tr>
Your table format is wrong. Place the headers inside and do a ng-repeat to generate tr
DEMO
var app =angular.module('testApp', []);
app.controller('testCtrl', function($scope) {
$scope.users = [{'name':'Mike', 'age':21},
{'name':'Joe', 'age':24}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<table border="2">
<tr>
<td>name</td>
<td>age</td>
</tr>
<tr ng-repeat="user in users">
<td >{{user.name}}</td>
<td >{{user.age}}</td>
</tr>
</table>
</body>

Is it possible to to generate multiple rows based on the column list by single ng-repeat?

I want to create 3 rows based on the columnList which contains 3 types of values i.e caption, shortCaption and columnName.
[{
caption : "First Name",
shortCaption: "FN",
columnName : "FIRST_NAME"
},{
caption : "Last Name",
shortCaption: "LN",
columnName : "LAST_NAME"
}
]
Currently i am generating table cell by iterating columnList with ng-repeat inside each row, here i am using ng-repeat three times which can be cause slowness, Is it possible to use ng-repeat only once at a time and generate all three rows, i also tried to use ng-repeat-start and ng-repeat-end but failed to get the output.
<tr>
<th ng-repeat="column in columnList">
{{column.caption}}
</th>
</tr>
<tr>
<th ng-repeat="column in columnList">
{{column.shortCaption}}
</th>
</tr>
<tr>
<th ng-repeat="column in columnList">
{{column.columnName}}
</th>
</tr>
http://plnkr.co/n0XKuwxOY8e1zjLfYwFI
template.html
<tr ng-repeat="column in columnList">
<td ng-repeat="key in getKeys()" ng-bind="::column[key]"></td>
</tr>
Controller.js
$scope.getKeys = function() {
return ['caption', 'shortCaption', 'columnName'];
}
This uses the ng-repeat twice. If you are sure about the keys of the objects in your column list, you can eliminate the 2nd ng-repeat - but the performance improvement will be negligible unless you have more than 500+ rows.

How to hide some table columns based on screen size while using repeat Angular Material

I have a table that contains multiple columns and rows. When viewing on a small screen(phone) i want to hide some of those columns, otherwise show all columns.
The data inside my table is populated using a repeat. As i re-use the table in multiple places i would like to keep the repeat as the column and row count is different.
<table md-table class="md-data-table" id="data-table">
<thead md-head md-order="gridCtrl.gridModel.orderBy">
<tr md-row>
<th md-column ng-repeat="header in gridCtrl.gridModel.headers" md-order-by="fields[{{$index}}].value">
{{header.title}}
</th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-repeat="item in gridCtrl.gridModel.items | orderBy: gridCtrl.gridModel.orderBy | limitTo: gridCtrl.gridModel.itemsPerPage : (gridCtrl.gridModel.firstPage -1) * gridCtrl.gridModel.itemsPerPage">
<td md-cell ng-repeat="field in item.fields">
<div ng-if="gridCtrl.isLink(field)">
<h4 class="blue-link" id="gridFieldString{{field.value | idfy}}" ng-click="gridCtrl.click($event, field)">
{{field.value}}
</h4>
</div>
<div ng-if="!gridCtrl.isLink(field)">{{field.value}}</div>
</td>
</tr>
</tbody>
</table>
you can use
window.screen.availHeight
window.screen.availWidth
to get the current resolution.
Then add a ng-hide with screen resolution or
<tr md-row ng-hide="window.screen.availHeight < 500 && window.screen.availWidth <200">
You need to read media queries and define rules according to screen width
http://www.w3schools.com/css/css_rwd_mediaqueries.asp

nested ng-repeat that one depend on the other

I have an issue with angular, I want to use two nested ng-repeat in a data table where the first get the data, and the second get the name of field to be retrieved from the data (retrieved in the first ng-repeat)
here is what I tried to do with code :
<table md-table flex-order-gt-sm >
<thead md-head>
<tr md-row >
//1st : get the name of fields, not a problem
<th md-column ng-repeat="field in fields">{{item.name}}</th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-repeat="item in items">
<td md-cell ng-repeat="field in fields" >
//here is the problem I want to get the item that it's field name is field
{{item.{{field}} }}</td>
</tr>
</tbody>
</table>
for example if fields contain :{'a','b','c'}
and items contains {'a':'1','b':'2','c':'3'};
I want for example for the 1st iteration of {{item.{{field}} }} to return 1
Use toString() to retrieve the scope data in an scope object.
<tr md-row ng-repeat="item in items">
<td md-cell ng-repeat="field in fields" >
{{item[field.toString()]}}
</td>
</tr>
Here is the plunker
As an alternative you could also use a filter:
<td md-cell ng-repeat="field in fields | filter: { name: 'field' }">
</td>
You need to get fields collection according to item of items collection after
getFieldsByItem(item)
Then you can get field from fields collection
{{field}}

Filter a Table with AngularJS

I just got into AngularJS and I'm trying to filter a table. So far I create my table dynamically, which works fine.
HTML:
<div ng-app="tableApp" ng-controller="tableAppController">
<input type="text" class="form-control" ng-model="searchKey" placeholder="search..."/>
<div class="table-responsive">
<table class="table table-striped" id="trackingTable">
<thead>
<tr>
<th>No.r.</th>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in deviceData">
<td>{{ $index + 1 }}</td>
<td>{{x.a}}</td>
<td>{{x.b}}</td>
<td>{{x.c}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="scripts/AngularJS/tableAppController.js"></script>
tableAppController.js:
var app = angular.module('tableApp', []);
app.controller('tableAppController', function ($scope) {
$scope.deviceData = [{a: "123", b: "123", c: "01.01.2001"}, {a: "dummyDeviceID2", b: "dummyCarID98", c: "01.01.2001"}];
});
I'm now trying to implement an filter, which filters data from the table based on an user input from a textfield. But only when a user types something inside the textbox ofcourse. I started to change the line <tr ng-repeat="x in deviceData"> in the html file to <tr ng-repeat="x in deviceData | filter:{'a':searchKey}"> Why is this approach not working and how can I solve this problem?
You should be able to use keys on your search object to do this:
<input type="text" class="form-control" ng-model="searchKey.a" placeholder="search..."/>
<tr ng-repeat="x in deviceData | filter:searchKey">
See line 36 in the official example for more context: http://plnkr.co/edit/YUfG7yzxBQ0gT9bsnTN2?p=preview
Try this :
{{ filter_expression | filter : expression : comparator}}
<tr ng-repeat="x in deviceData | filter : searchKey">
AngularJS Official Documentation : filter
Plnkr : http://plnkr.co/edit/r6cchqzftaRiH543L1NE?p=preview

Categories