I have created a scope function like this
$scope.sample = [
{'SUPNAME':'AAA','SUPCODE':'22671','SLIPNO':'18384','DESG':'1','iv':'1'},
{'SUPNAME':'AAA','SUPCODE':'22671','SLIPNO':'18384','DESG':'2','iv':'2'},
{'SUPNAME':'AAA','SUPCODE':'22671','SLIPNO':'18384','DESG':'3','iv':'3'},
{'SUPNAME':'BBB','SUPCODE':'24603','SLIPNO':'26714','DESG':'1','iv':'4'},
{'SUPNAME':'BBB','SUPCODE':'24603','SLIPNO':'26714','DESG':'2','iv':'5'},
{'SUPNAME':'BBB','SUPCODE':'24603','SLIPNO':'26714','DESG':'3','iv':'6'},
]
I have to display by grouping with same SUPNAME,SUPCODE,SLIPNO. For example I have to display it like this.
SUPNAME:AAA SUPCODE=22671
DESG 1 DESG2 DESG 3
SUPNAME:BBB SUPCODE=24603
DESG 1 DESG2 DESG 3
So how can I create ng-repeat for this..Kindly give some solution.
i tried to create a Codepen for your case
grouped Codepen
<table class="table table-striped">
<tr><td>{{data1}}</td><td>{{data2}}</td></tr>
<tr ng-repeat="item in filteredsample = (sample | filter:{ SUPNAME: 'AAA'})">
</tr>
<ul ng-repeat="thing in filteredsample">
<li style = "float:left; margin:20px">DESG VALUE {{$index}} = {{thing.DESG}}</li>
</ul>
</div>
Hope this helps
Related
Here,I am loading a json file and using ng-repeat I display json data into table form.I am adding following features to code.
checkboxes to add the two CSS:
Bubble CSS
text-danger [In built class]
when you click on those check boxes, the CSS is applied only to the even rows in the table.
Using the ng-if or ngHide/Show to display the User-info which have the gender : Male.
I use ng-if to fulfill condition because ng-if will remove elements from DOM. This means that all your handlers or anything else attached to those elements will be lost.
ng-show/ng-hide does not remove the elements from DOM. It uses CSS styles to hide/show elements.
I created Codepen demo for my problem.Here ng-if and ng-class-even doesn't give expected o/p.
HTML:
<body ng-app="module1" ng-controller="module1Ctrl as flight">
<div class="page-header">
<h1>Angular app</h1>
</div>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="danger">
Something's Wrong
</label>
<label>
<input type="checkbox" ng-model="bubble">
Zoom In/Out
</label>
</div>
<table class="table table-striped table-bordered">
<tr>
<th>name</th>
<th>Birthdate</th>
<th>gender</th>
<th>father</th>
<th>mother</th>
</tr>
<tr ng-repeat="x in flightData"
ng-class-even ="{'text-danger':danger,'bubble': bubble}"
ng-if="x.sex=='f'">
<td>{{x.name}}</td>
<td>{{ x.born |date:'yyyy-MM-dd THH:mm:ss'}}</td>
<td>{{x.sex }}</td>
<td>{{x.father}}</td>
<td>{{x.mother}}</td>
</tr>
</table>
</div>
</body>
JS
var app=angular.module('module1',[]);
app.controller('module1Ctrl', function ($scope,$http) {
$scope.getDataFromServer = function () {
$http.get('http://codepen.io/timivey/pen/emQZYY.js').then(
function(res){
console.log(res.data);
$scope.flightData = res.data;
}
,function (err) {
console.log(err.message);
})
};
$scope.getDataFromServer();
$scope.showList='table';
});
Just a small change to Joel's answer. You no need to create a separate filter method.
<tr ng-repeat="x in flightData | filter:{sex:'f'}"
ng-class-even ="{'text-danger':danger,'bubble': bubble}">
There is nothing wrong with your code, but there is a small error with your understanding:
<tr ng-repeat="x in flightData"
ng-class-even ="{'text-danger':danger,'bubble': bubble}"
ng-if="x.sex=='f'">
The ng-if="x.sex == 'f' statement is omitting each <td> from display, but it does not remove them from the flightData array. ng-repeat is run for each item in the array, not for each item that is displayed.
If you add {{$index}} to each row of the table you will see that the order is not 0,1,2,3... it is 1,2,7,11,14...
If you remove the ng-if statement, you will see that every even row has correct class applied.
Instead of using ng-if to remove the males from the list, use a filter instead:
<tr ng-repeat="x in flightData | females"
ng-class-even ="{'text-danger':danger,'bubble': bubble}">
Append this filter to your controller statement in the JS code:
.filter('females', function() {
return function(input) {
var out = [];
angular.forEach(input, function(x) {
if(x.sex == 'f') {
out.push(x);
}
});
return out;
};
})
http://codepen.io/anon/pen/mABJyo
What this does is remove the males from the list before it runs the ng-repeat and will correctly output in the order 0,1,2,3...
I thought that is using the orderby filter in angular, we could simply reverse by adding a "-" before that which you want to order by. So in my case in the code below, why would this not work? I have tried with the "-" in and out of the single quotes.
Code:
<tr class="alertText" ng-repeat="swipe in ppt.Swipes | orderBy:'-swipe.date' ">
<td>{{swipe.date|date : 'MM/dd/yyyy'}}</td>
<td>{{swipe.descr}}</td>
<td>{{swipe.amount | currency}}</td>
<td>{{swipe.dueDate|date : 'MM/dd/yyyy'}}</td>
<td>{{swipe.status}}</td>
<td class="clearIcon"><span ng-click="editSwipe()"><img src="ppt/assets/toolIcons/clearswipe-small.svg"></span></td>
</tr>
orderBy:'-date' is enought for ordering
You should have the property as '-date' in the ng-repeat in the filter ,
Code:
<div ng-repeat="card in myCards | orderBy:'-date'">
<businesscard>{{card.firstName}} {{card.date | date}}</businesscard>
</div>
Here is the working jsfiddle
function Main($scope) {
$scope.items = [
{"name":"ali",date: new Date('12/23/2013')}
,{"name":"Reza",date: new Date('12/23/2015')},
{"name":"Amir",date: new Date('12/23/2011')}
];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="Main">
<div ng-repeat="item in items | orderBy:'-date'">{{item.name}}: {{item.date | date}}</div>
</div>
</div>
And don't forget than you can use second parameter of orderBy filter to set sort order:
<tr class="alertText" ng-repeat="swipe in ppt.Swipes | orderBy:'date':1">
I'm new in angularJS and making a simple app, but I am finding it difficult to create output with dynamic data.
Here my html -
<div ng-app="MyApp">
<div ng-controller="TabsDemoCtrl">
<div ng-controller="TabsDemoCtrl">
<h1> How to make output dynamic data like this?</h1>
<table ng-repeat="customize in data">
<tr>
<th colspan="2">{{customize.product.name}}</th>
</tr>
<tr>
<td colspan="2">Assets</td>
</tr>
<tr>
<td>{{ How to bind ouput dynamic attribute data ? }}</td>
<td>{{ How to bind ouput dynamic subattribute ? }}</td>
</tr>
</table>
</div>
</div>
</div>
and here my JS -
angular.module('MyApp', [
'ui.bootstrap']);
(function(MyApp) {
'use strict';
MyApp.controller('TabsDemoCtrl', ['$scope', function($scope) {
// categories
$scope.data = [
{
product : {
name : 'Product 1'
},
assets : {
color : {
black : '/file/6d2ceb60-257b-47e6-9db0-3a2299ff75f2.png'
}
}
},
{
product : {
name : 'Product 2'
},
assets : {
soles : {
black : '/file/840ec1ff-6d27-40af-b4ca-277aa09ad147.png',
red : '/file/1970f2e2-b7a0-439c-98d9-b9ea1604c227.png'
},
material : {
black : '/file/aebe8f68-60fd-4fda-bd46-00e80f190ba2.png',
green : '/file/e225e20d-5b97-4a60-8337-0551064a8d8c.png'
},
lining : {
blue : '/file/6d2ceb60-257b-47e6-9db0-3a2299ff75f2.png',
red : '/file/280fecb5-ebe5-47cb-85f4-4d1bf6dd8ed0.png'
}
}
}
];
}]);
})(angular.module('MyApp'));
I tried to make an output of dynamic structure data in this link demo but it doesn't show.
So how to make view with this dynamic data ?
quick hint:
you can use something like
<li ng-repeat="(key,val) in product.assets"></li>
to render all keys and values. now you have to check whether the val is an object or a string. if its an object you have to render another level of KV pairs...
<div>
<ul>
<li ng-repeat="product in data">
<p>{{product.product.name}}</p>
<ul>
<li ng-repeat="(key,val) in product.assets">
{{key}}
<ul>
<li ng-repeat="(key,val) in val">
{{key}} => {{val}}
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
I'll let you do the template to display recursive data and the data validation. do not use (key,val) template recursion on strings!!
refer to this: http://jsfiddle.net/brendanowen/uXbn6/8/
Check this link http://plnkr.co/edit/gFSXHT0YUzD0lE9Y7wWZ?p=preview Hope it will solve your problem.
Before rendering JSON data make it sure the format is correct.
here is the online json parser https://jsonformatter.curiousconcept.com/
Let me know then if it solve your issue.
Thanks
<ul ng-repeat="item in items">
<li>{{item.name}}</li>
</ul>
js
$scope.item = [
{
"itemId": 1,
"name":"laptop"
}
];
I want to the $index of item to be my itemId so in the future I can store in db or use it in somewhere else. I can do <li>{{$index}}</li> but how to bind it with my object of item in js?
You can bind with
<li ng-bind="$inndex" ></li>
Or store in id or other tags by
<li custom_tag="{{$index}}"></li>
One trick for selection of individual items of ng-repeat, is the inclusion of an controller in the same element as the ng-repeat.
The ng-repeat dedicated controller will contain all the new items generated by the iteration, ng-click calling a function in that controller will do the item selection.
Check Demo here.
<tbody ng-repeat="i in invoices"
ng-controller="RowCtrl"
ng-click="toggleRow()"
ng-switch on="isSelected()">
<tr>
<td>{{i.name}}</td>
<td>{{i.company}}</td>
</tr>
<tr ng-switch-when="true">
<td>{{i.invoice}}</td>
<td>{{i.units}}</td>
</tr>
Given a json like this:
{
"name": "john"
"colours": [{"id": 1, "name": "green"},{"id": 2, "name": "blue"}]
}
and two regular html inputs:
<input type="text" name="name" />
<input type="text" name="color" />
<input type="submit" value="submit" />
I need to build a table with all the possible variations, ex:
John green
John blue
That means that if a user continues adding values through the inputs new rows will appear building the new variations, for instance:
I also need to have available the id to handle it, and I need that when I add new values using the inputs for instance: "Peter" "Black", I need to autofill the id (colour id) dynamically like an auto increment in mysql, resulting in something like this:
{
"colours": […...{"id": 3, "name": "black"}]
}
Is that possible? Which options do I have for doing that with angular? I'm still thinking in the jQuery way and I would like to do it in the angular way.
I took a look to hg-repeat, and used it, but I'm not figuring out how to deliver the expected result, the only thing that come to my mind was to use nested ng-repeats, but it didm´t work.
Thanks so much in advance,
Guillermo
Just want to share with what I used so far to save your time.
Here are examples of hard-coded headers and dynamic headers (in case if don't care about data structure). In both cases I wrote some simple directive: customSort
customSort
.directive("customSort", function() {
return {
restrict: 'A',
transclude: true,
scope: {
order: '=',
sort: '='
},
template :
' <a ng-click="sort_by(order)" style="color: #555555;">'+
' <span ng-transclude></span>'+
' <i ng-class="selectedCls(order)"></i>'+
'</a>',
link: function(scope) {
// change sorting order
scope.sort_by = function(newSortingOrder) {
var sort = scope.sort;
if (sort.sortingOrder == newSortingOrder){
sort.reverse = !sort.reverse;
}
sort.sortingOrder = newSortingOrder;
};
scope.selectedCls = function(column) {
if(column == scope.sort.sortingOrder){
return ('icon-chevron-' + ((scope.sort.reverse) ? 'down' : 'up'));
}
else{
return'icon-sort'
}
};
}// end link
}
});
[1st option with static headers]
I used single ng-repeat
This is a good example in Fiddle (Notice, there is no jQuery library!)
<tbody>
<tr ng-repeat="item in pagedItems[currentPage] | orderBy:sortingOrder:reverse">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.description}}</td>
<td>{{item.field3}}</td>
<td>{{item.field4}}</td>
<td>{{item.field5}}</td>
</tr>
</tbody>
[2nd option with dynamic headers]
Demo 2: Fiddle
HTML
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th ng-repeat="header in table_headers"
class="{{header.name}}" custom-sort order="header.name" sort="sort"
>{{ header.name }}
</th>
</tr>
</thead>
<tfoot>
<td colspan="6">
<div class="pagination pull-right">
<ul>
<li ng-class="{disabled: currentPage == 0}">
<a href ng-click="prevPage()">« Prev</a>
</li>
<li ng-repeat="n in range(pagedItems.length, currentPage, currentPage + gap) "
ng-class="{active: n == currentPage}"
ng-click="setPage()">
<a href ng-bind="n + 1">1</a>
</li>
<li ng-class="{disabled: (currentPage) == pagedItems.length - 1}">
<a href ng-click="nextPage()">Next »</a>
</li>
</ul>
</div>
</td>
</tfoot>
<pre>pagedItems.length: {{pagedItems.length|json}}</pre>
<pre>currentPage: {{currentPage|json}}</pre>
<pre>currentPage: {{sort|json}}</pre>
<tbody>
<tr ng-repeat="item in pagedItems[currentPage] | orderBy:sort.sortingOrder:sort.reverse">
<td ng-repeat="val in item" ng-bind-html-unsafe="item[table_headers[$index].name]"></td>
</tr>
</tbody>
</table>
As a side note:
The ng-bind-html-unsafe is deprecated, so I used it only for Demo (2nd example). You welcome to edit.
Here's an example of one with dynamic columns and rows with angularJS: http://plnkr.co/edit/0fsRUp?p=preview
TGrid is another option that people don't usually find in a google search. If the other grids you find don't suit your needs, you can give it a try, its free
Check out this angular-table directive.
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th ng-repeat="header in headers | filter:headerFilter | orderBy:headerOrder" width="{{header.width}}">{{header.label}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users" ng-class-odd="'trOdd'" ng-class-even="'trEven'" ng-dblclick="rowDoubleClicked(user)">
<td ng-repeat="(key,val) in user | orderBy:userOrder(key)">{{val}}</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
refer this https://gist.github.com/ebellinger/4399082
First off all I would like to thanks #MaximShoustin.
Thanks of you I have really nice table.
I provide some small modification in $scope.range and $scope.setPage.
In this way I have now possibility to go to the last page or come back to the first page.
Also when I'm going to next or prev page the navigation is changing when $scope.gap is crossing. And the current page is not always on first position. For me it's looking more nicer.
Here is the new fiddle example:
http://jsfiddle.net/qLBRZ/3/