I am trying to sort my column using click event of column header.I am using angular js framework using filter orderBy .I saw a example which is working fine which is sort the column on click of header of column
http://plnkr.co/edit/aGAI6EmCwGyPKmFZAFb8?p=preview
I make a simple demo using above example try to sort my column on header click
.When I click on header it gives me alert of index , reverse parameter along with image is also change but the column is not sorted
can we sort column using header click as shown in above example
here is my code
http://plnkr.co/edit/r22YnCILVSuWPrMnTnv2?p=preview
please click on any column header and see the alerts but column is not sorted why ?
Please increase the output window screen of plunker to see the outputs .
<header-row ng-transclude class="row rowclassheaderClass" style="padding-bottom:1%">
<div class="col brd text-center brdleft_right gray-20 collapse-sm columnCss"
ng-repeat="d in invoice_column_name | filter:{checked: true}">
<sort-header label="{{d.label|uppercase}}" index="{{d.index}}"
sort-exp="setSort(idx, reverse)"></sort-header>
</div>
<div class="col col-10 text-center brd gray-20" ng-click="openSettingPopover($event)">
<button class="button-icon icon ion-ios-more fntandbg"></button>
</div>
</header-row>
Any update..?
It seems like you are trying to re-invent the wheel. There is a sortBy built directly into angular.
Take a look at
docs.angularjs.org/api/ng/filter/orderBy
In particular the first example for a basic overview and then the second one (I have outlined in the code sample below) it does exactly what you are trying to achieve but in much less code.
View Plunkr
<body ng-app="orderByExample">
<div ng-controller="ExampleController">
<table class="friend">
<tr>
<th>Name
(^)</th>
<th>Phone Number</th>
<th>Age</th>
</tr>
<tr ng-repeat="friend in friends">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<td>{{friend.age}}</td>
</tr>
</table>
</div>
</body>
Related
I am trying to use the ng-repeat directive to create table rows with a list of campaign names.
However, I am not able to get any results, though I am still able to see one of the children of the array displaying correctly.
Here is my view code:
<div class="modal-body">
<p>{{$ctrl.contact.Campaigns[0].CampaignName}}</p>
<tr ng-repeat="campaign in $ctrl.contact.Campaigns">
<label>
{{campaign.CampaignName}}
</label>
</tr>
</div>
I can successfully see the paragraph element above and it shows the expected data, but not the table row elements.
I don't see any errors in the browser console.
How can I make the ng-repeat directive work in the code above?
The problem was that the <tr> / table row element didn't have a parent <table> element containing it.
This is solved by simply adding in table tags around the orphaned <tr> element:
<div class="modal-body">
<table>
<tr ng-repeat="campaign in $ctrl.contact.Campaigns">
<label>
{{campaign.CampaignName}}
</label>
</tr>
</table>
</div>
I'm trying to implement search method for "chat channels" that for every query it represents the compatible results from SQL table from the database.Each result can be distinguished by a unique ID that is also comes from the SQl table.I don't want to show the ID's so I put them in a hidden input for each result using ng-model.Also, for each, result the user have a possibility to subscribe to the channel (subscribe button) displayed in this result,so in order to save the subscription properly,I need to get the ID saved in the hidden input of the same result.
Here's what I tried:
<table class="table table-condensed">
<tr class="separating_line" ng-repeat="x in result">
<!-- ng-bind-html allows to bind a variable to the innerHTML part of the HTML element -->
<td>
<div class="col-md-8">
<h4><b style="color: gray;">{{ x.Name }}</b></h4>
<br><p> {{ x.Description }}</p>
</div>
<div class="col-md-2">
<small><label style="color: gray;">Subscribers </label>{{ x.Subscribersnum }}</label></small><br>
<input id="hiddenId" hidden="hide" ng-model="idval=x.ChanID" />
<button ng-click="subscribechannel()" class="btn btn-primary">Subscribe</button>
</div>
</td>
</tr>
</table>
In the controller I send it in the following way to convenient Servlet:
$http.get("http://localhost:8080/ExampleServletv3/subscribeservlet",{
params: {
subidval: $scope.idval
}
})
But when debugging the value that I get in the servlet is null.
How can I solve this? Any ideas?
Thanks
You don't need any hidden field to do what you want. All you need is to pass a parameter to your function:
<tr class="separating_line" ng-repeat="x in result">
...
<button ng-click="subscribechannel(x)" class="btn btn-primary">Subscribe</button>
I have used ng-repeat numerous times already in the past, but for some reason I cannot yet understand why it is not on the following situation:
I have an array of objects called registers which I am referencing on the ng-repeat but nothing happens.
I know the array is populated because I have seen it on numerous console.log and because it works if I move the ng-repeat over to the <tbody>
<div ng-repeat = "r in registers">
<!-- START HEADER -->
<tbody class="js-table-sections-header">
<tr>
<td class="text-center">
<i class="fa fa-angle-right"></i>
</td>
<td class="font-w600">Denise Watson</td>
</tr>
</tbody> <!-- END HEADER -->
<tbody>
<tr>
<td class="text-center"></td>
<td>
<!-- Summernote Container -->
<div class="js-summernote-air">
<p>End of air-mode area!</p>
</div>
</td>
</tr>
</tbody>
<!-- END TABLE -->
</div>
I was hoping someone could tell me if there is something I may be ignoring.
Thanks in advance.
I think I just ran into this same problem. It stems from <div> not being a valid elment within a <table>.
I'm guessing that since you have <tbody> there, that there is a <table> tag that was left out of your snippet. <div>s aren't allowed in a table, so the browser moves it before the table. In my situation, doing this, causes the angular scope to change so that there was nothing to iterate over. You can verify this by using the developer tools of your browser.
So, my guess is that you probably want to move the ng-repeat onto the <tbody> or <table> tag.
If you want to use ng-repeat in "div" tag means use "span"
inside div tag. instead of using "table" and its sub attributes..
else use your ng-repeat inside "table" or "thead" or "tr" also
it will iterate rows ...
than only ng-repeat will works.
I am trying to achieve the following in angualrjs:
I have multiple information lines, that each can be clicked regardless of the others.
When I click on a line, a div is opened and a table is shown in regarding that line.
My html now looks like this:
<div ng-app="TModule" ng-cloak>
<div class="myDiv" ng-controller="tController as tCtrl">
<h1>Title</h1>
<ul>
<li ng-repeat="option in tCtrl.availableOptions" ng-click="tCtrl.toggleOpen(option.id)">
<div>
<h2>{{option.name}}</h2>
<div ng-show="isOpen(option.id)">
//Table should go here
</div>
</div>
</li>
</ul>
My table template is the same for all lines and should look like this:
<table>
<thead>
<tr>
<th>Header I</th>
...
</tr>
</thead>
<tbody>
<tr ng-repeat...>...</tr>
....
</tbody>
</table>
What I want to happen with clicking on any li item, that it will call a function on the controller which will make an ajax call, and fill the table using a template, with the results receive.
My problem is that I don't know how to fill each table with the same template and to have different information (without using array that will store each information)
Not sure if it is possible in angular and what will be the best way to achieve this?
Each line can be opened together and each line has a different set of information.
I'm trying to add custom column filter (autocomplete, select ...) but can't find how. I tried to override default filter template with a tr-ng-grid-column-filter attribute on a th, but it does not works. Header is changed somehow (title is not bold anymore) and the new template is not used at all.
Is the tr-ng-grid-column-filter right way to do it at all or there is something else?
Data is sorted, paginated and filtered on the server so it does not have any relation to angular or trnggrid client side filtering & formating. So I just want to display some other input on some columns (e.g. select) instead of default input text rendered by a grid.
I'm using angular 1.2.22 with TrNgGrid 3.0.3
There are some samples floating around the net. Here's one:
http://plnkr.co/edit/I6JJQD?p=preview
<table tr-ng-grid='' items='myItems'>
<thead>
<tr>
<th field-name="name"></th>
<th field-name="computedTagsField" display-format="computedTags:gridItem">
<div>
<div class="tr-ng-title">Tags</div>
<div class="tr-ng-column-filter">
<select class="form-control input-sm" ng-options="tag for tag in [null, 'tennis', 'basketball', 'volley']" ng-model="columnOptions.filter"></select>
</div>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td field-name="computedTagsField"></td>
</tr>
</tbody>
</table>
I created a directive to implement a custom drop down filter. It, in itself, can be reused on any project, but it will also give you a good working example of how to implement your own custom filter by simply extending TRNG grid.
Tutorial:
http://www.davidcline.info/2015/08/trnggrid-dropdown-column-filter.html
Demo:
http://embed.plnkr.co/w39Xt74pippDajyqUIOD/preview