I am working on a directive that displays a table using ng-repeat directives. Each cell in the table may contain a button depending on the data. Here is the pertinent snippet of the template.
<tbody>
<tr ng-repeat="row in data.rows">
<td>{{ row.rowName }}</td>
<td ng-repeat="cell in row.cells">
<button id="button-{{ row.id }}-{{ cell.id }}"
class="btn btn-primary"
ng-show="cell.isActive"
ng-click="onClick(row.id, cell.id, $event)">Select</button>
</td>
</tr>
</tbody>
In the controller I have
$scope.onClick = function (rowId, cellId, event) {
$scope.selectedRowId = rowId;
$scope.selectedCellId = cellId;
$scope.selectedButtonId = event.target.id;
};
The goal is to make it such that when a user clicks a button in the table, that button becomes active. When the user clicks on another button, it will become active making the previously active button inactive. This functionality will be used to drive what is displayed on another section of the page.
I have tried a few things, but I think the most angular way of doing things is to use ng-class in the buttons to apply the active and inactive classes based on what button has been clicked. To this end, I am assigning them all unique ids and tracking which button has been clicked based on the event.
The problem is I can not figure out how to make the ng-class work. Is there some way I can get the id of the current button that I am in, or am I going about this completely wrong in the first place.
Thanks.
In your button code set the html ng-class attribute :
ng-class="active : selectedRowId = row.id & selectedCellId = cell.id"
Related
I need to have an overall Show/Hide click to show or hide all the detail divs of a list of "panels" of data. Also within each panel, there is a Show/Hide click to individually show or hide that div of data.
I think that if the overall show/hide is clicked that the individual click values should be set equal to overall value when clicked. That way if the individual ones are changed, they are all set to show or hide when the main one is clicked.
This is how I tried to do that:
<div>- Hide All Details / + Show All</div>
<div class="tender-list" ng-repeat="row in tenders" ng-include="'tender/tender_panel.html'"></div>
Where the hide/show part of tender_panel.html is here:
<div>- Hide Details</div>
<div class="tender-details" ng-hide="hideDetails">
<table width="100%" id="tender-bottom-table">
<tbody>
...
</tbody>
</table>
</div>
There is another table above the tender-bottom-table. Plus a another table after.
What is happening is that it works fine when initially loaded. The Hide All/Show All works. Then I click on the individual show/hides and they work. But then the All Show/All Hide no longer works and I don't see how clicking the individual links breaks things.
This app is Symfony2 with Angular and Bootstrap.
Any help would be greatly appreciated.
one thing you could try is to have a property flag in each tenders item that sets if it's shown/hidden and show the individual item based on if hideAllDetails + their flag is true:
<div>- <a href='#' ng-click="hideAllDetails = ! hideAllDetails;">Hide All
Details / + Show All</a></div>
<div class="tender-list" ng-repeat="row in tenders" ng-
include="'tender/tender_panel.html'"></div>
tender_panel.html:
<div>- <a href='#' ng-click="row.hideDetails = ! row.hideDetails">Hide
Details</a></div>
<div class="tender-details" ng-hide="hideDetails || hideAllDetails">
<table width="100%" id="tender-bottom-table">
<tbody>
...
</tbody>
</table>
</div>
I have a editTable like this:
<tr ng-repeat='guest in guestList | orderBy:orderByField:reverseSort'>
<td><span ng-show='!guest.isedit'>{{guest.firstname}}</span><span ng-show='guest.isedit'><input type="text" ng-model='guest.firstname'/></span></td>
<td><span ng-show='!guest.isedit'>mode_edit</i></span><span ng-show='guest.isedit'><button ng-click='contactUpdate(guest)'>OK</button></span></td>
</tr>
in my controller:
$scope.editGuest = function(guest){
delete $scope.orderByField;
guest.isedit = true;
};
$scope.contactUpdate = function(guest){
//Save the change then put the order back to re-order the table
$scope.orderByField = 'firstname';
}
As you can see, this is a editable table, if I click edit, the table becomes editable. I want to disable the sort when editing, until user finish editing and hit the OK button(Which already saved in the server), then I will re-order with new data. The problem is for the first time I fire editGuest(guest),it will still jump. Is there any way I can achieve this?
You need to have a different ng-model on your input box like this :
<tr ng-repeat='guest in guestList | orderBy:orderByField:reverseSort'>
<td>
<span ng-show='!guest.isedit'>{{guest.firstname}}</span>
<span ng-show='guest.isedit'><input type="text" value="{{ guest.firstname }}" ng-model='firstname'/></span>//I have set the value to the guest's firstname to default the name when the input box becomes active. You can also use ng-init to achieve it.
</td>
<td>
<span ng-show='!guest.isedit'>mode_edit</i></span>
<span ng-show='guest.isedit'><button ng-click='contactUpdate(firstname)'>OK</button></span></td>
</tr>
In your Controller :
$scope.contactUpdate(guest, name){
guest.firstname = name;
name = '';//EDIT
}
You need to remove binding first for this.
Create clone of guestList object and do the editing operation on it.
once it is done assign the clone object back to guestList.
e.g.
var dummyGuestList = angular.copy(guestList)
//some operation on dummyGuestList ;
guestList = dummyGuestList //assign bacl again
I'm teaching myself angular and working through the O'Reilly AngularJS book. There's an email app example and I want to add a button "Mark as Read" that will apply a class to the row when the button is clicked.
After doing some research I found solutions applying conditional classes based on using $index to select a row, but that is toggling the class from the other elements when I click the button. You can see what I'm talking about here in this Plunker.
Here's the HTML in my view:
<table>
<tr>
<td><strong>Sender</strong></td>
<td><strong>Subject</strong></td>
<td><strong>Date</strong></td>
</tr>
<tr ng-repeat='message in messages' ng-click='readMessage($index)'
ng-class='{markRead: $index==selectedRow}'>
<td>{{message.sender}}</td>
<td><a ng-href='#/view/{{message.id}}'>{{message.subject}}</a></td>
<td>{{message.date}}</td>
<td><button ng-click="remove(message)">Delete</button></td>
<td><button ng-click="markRead()">Mark as Read</button></td>
</tr>
</table>
and here is what I have added to the controller to apply the class on click:
$scope.readMessage = function(row) {
$scope.selectedRow = row;
};
My goal is to have the ability to apply the class to any and all elements in the array, as the user desires (not just one at a time).
Can someone please help me understand why this isn't working and how I can achieve my goal? All the questions/answers I can find on SO are about toggling classes or setting an active class, which is the opposite of what I'm trying to accomplish.
Thank you!
The function readMessage could flag the message as read, and ng-class set the css class if the flag is set:
Controller:
$scope.readMessage = function(message) {
message.read = true;
};
Template:
ng-class='{markRead: message.read}'
See plunker
I have a table, I am already given it CSS using ng-class if they satisfy a condition. Now I want to show only those rows who satisfy the same condition on a button click. I have wrote a controller which checks if the data received is within 24 hours are not and marks the data cell. Until this it's working.Now I need to add a button and show only the row which has this td marked as not received in time.
<tbody>
<tr ng-repeat ="data in log">
<td>{{data.UniqueId}}</td>
<td>{{data.Name}}</td>
<td ng-class ="{'data-notreceived' : dataNotReceived('data.receivedTime')}">{{data.receivedTime
}}
</tbody>
</table>
I think something like this should work. Basically, clicking the button will toggle between showing all or only the items marked as 'data not received'.
<tbody>
<tr ng-repeat ="data in log" ng-show="showAll || dataNotReceived(data.receivedTime)">
<td>{{data.UniqueId}}</td>
<td>{{data.Name}}</td>
<td ng-class ="{'data-notreceived' : dataNotReceived('data.receivedTime')}">{{data.receivedTime}}
</tr>
</tbody>
// in controller
$scope.showAll = true;
$scope.onButtonClick = function() {
$scope.showAll = !$scope.showAll;
return false;
}
From the information provided in question what I can say is: Use ng-show to show rows based on your condition.
<tr ng-show ="your_condition">
You could also use an ng-if rather than ng-show. See the differences here.
Really depends on how often the hide/show toggle needs to happen.
<tbody>
<tr ng-repeat="data in log" ng-if="showLast24Hrs(data.ReceivedTime)">
<td>{{data.UniqueId}}</td>
<td>{{data.Name}}</td>
<td>{{data.ReceivedTime}}</td>
</tbody>
and then in the controller,
$scope.showLast24Hrs = function(receivedTime){
if($scope.isLast24Hours) {
return receivedTime < 200; // Write your less than 24 hours check here
}
return true;
}
I wrote this demo on Codepen. Hope that helps.
Let's say I have a row that looks like
<tr>
<td>John</td>
<td>Smith</td>
<td>Approved?<input type="checkbox"/></td>
</tr>
Each row shows one employee, and allows you to check to approve/disapprove the employee (e.g. for registration for a course). I want the user to be able to click anywhere on the row to get greater detail about the employee, but if they click on the last column ("Approved?") it should not go to greater detail, since it should just change the checkbox.
Here are the solutions I know of, none is great:
Entire row: <tr class="clickable" ng-click="go()">. Makes all the cells and margins clickable, and only requires one ng-click entry, but then the checkbox causes "go()" to execute, which is bad.
Each cell: <td class="clickable" ng-click="go()">...<td class="clickable" ng-click="go()">. Pro: can restrict to just the cells I want. Con: lots of repetition (not DRY), and misses the margins.
Entire row with special "go" fn: <tr class="clickable" ng-click="go()">, but "go" knows how to differentiate between different cells. Pro: Has exactly the effect. Con: requires lots of view/html knowledge in a specialized controller action.
How can I make the first 2 columns and their margins clickable, but not the 3rd or its margins?
You can use two click handlers, one for a whole tr , second for a last td' checkbox. In the second use Event's stopPropagation method.
Controller:
var TableCtrl = function($scope){
$scope.click1 = function(){
console.log("Click 1 method")
}
$scope.click2 = function(e){
console.log("Click 2 method");
e.stopPropagation();
}
}
Markup:
<table ng-controller="TableCtrl">
<tr ng-click="click1()">
<td>John</td> <td>Smith</td>
<td>Approved?<input type="checkbox" ng-click="click2($event)"/></td>
</tr>
</table>
Working example: http://jsfiddle.net/zDMQB/1/
How about this?
<tr>
<td style="cursor: pointer;" ng-click="alert('hello1')">John</td>
<td style="cursor: pointer;" ng-click="alert('hello2')">Smith</td>
<td>Approved?<input type="checkbox"/></td>
</tr>