I have a array of task in which there are two duplicate departments, but i dont want to show the second duplicate record in ng-repeat, but only for the first record i want to show even if it is duplicate.
Here is my code, can anyone tell me where i'm going wrong.
<tr ng-repeat="t in item.requisitionTask track by t.id">
<td>
<div ng-hide="!$first ? item.requisitionTask[$index-1].department.departmentCode==$index.department.departmentCode : false">
{{t.department.departmentName}}</div>
</td>
Solved it by targeting the data particularly.
<td><div ng-hide="!$first ? item.requisitionTask[$index-1].department.departmentCode==item.requisitionTask[$index].department.departmentCode : false">
I suspect that you want to hide data if the previous item contains the same departmentCode as your current item. As mentioned in my comment, you should move this logic into a function on your controller's scope.
<tr ng-repeat="t in item.requisitionTask track by t.id">
<td>
<div ng-hide="isNotFirstOrSameCodeAsPrevious($index)">
{{t.department.departmentName}}
</div>
</td>
</tr>
In your controller:
function isNotFirstOrSameCodeAsPrevious($index) {
if ($index === 0) return false;
return item.requisitionTask[$index - 1].department.departmentCode ===
item.requisitionTask[$index].department.departmentCode;
}
Related
I have a table row being populated with the array of Json objects.
I actually want to click one of the row item and move to the next page by also taking the clicked item's id.
My Code:
AngularJS function
$scope.findAllCompanies = function() {
$http.get('http://blahblablah/company/all').
then(function(response) {
$scope.companyList = response.data;
});
}
HTML: traversing the companyList
<tr data-ng-repeat="company in companyList">
<td> {{company.companyId}} </td>
<td> {{company.legalName}} </td>
<td> {{company.dbaName}} </td>
<td> {{company.formation}} </td>
</tr>
So now, If I click on companyId in any row, the page should be redirected to company.html?companyId=anyNum
I am thinking to merge them here, something like this:
Thanks, and looking forward to hear from you.
Using ng-href
<a ng-href="/pages/company?companyId={{company.companyId}}"> {{company.companyId}} </a>
I'm trying to do a table (with a lot of data) with Angular, the table is already done with PHP but to add a filter is easier using Angular. PHP takes 10secs to draw the entire table of 11k rows, but Angular keeps going on and on, even Firefox tells me that a script is unasnwered. If I click continue, the message is shown again, if I click cancel the page does nothing, if I press debug it continues running but nothing is shown.
At first, I thought that drawing +11k rows in HTML with the ng-repeat was too much and that was causing the problem, so I added a limitTo (50) and also added a infinite scroll div. But it's still not showing anything and keeps on loading.
Here is some code:
<div ng-app='mainApp'>
<div ng-init='values=[".$angularString."]' ng-controller='seeTickets as tickets'>
<div infinite-scroll='tickets.loadMore()' infinite-scroll-distance='1'>
Filtro: <input type='text' ng-model='globalSearch.$'/><br><br>
<script type='text/javascript'>
var app = angular.module('mainApp', []);
app.controller('seeTickets', function(){
this.totalDisplayed = 50;
this.loadMore = function(){
this.totalDisplayed += 50;
}
});
</script>
<table>
<tr ng-repeat="value in values | filter:globalSearch | limitTo:tickets.totalDisplayed">
<td> {{value.id_ticket}} </td>
<td> {{value.ticket_date}} </td>
<td> {{value.ticket_subject}} </td>
<td> {{value.ticket_from}} </td>
<td> {{value.ticket_to}} </td>
<td> {{value.ticket_priority}} </td>
</tr>
</table>
</div>
</div>
</div>
Am I doing something wrong? Is there a way to work this out? Why it's keep on loading even if I set limitTo?
Add track by $index to ng-repeat like this:
<tr ng-repeat="value in values | filter:globalSearch | limitTo:tickets.totalDisplayed track by $index">
...
</tr>
I am trying to fix a bug with an angularjs list.
When an item in the list is edited, the record is sorted alphetically in real time and it jumps to a new position in the list.
This is proving problematic as when someone tries to edit a record, "ABC" for example, if they put a "Z" in front of it it jumps to the last page on the list.
The text input value is bound directly to the model, which I suspect is the issue, as the data-ng-repeat directive ensures that the data is sorted alphabetically.
As such I tried changing the data-ng-model binding to data-ng-bind, as it is my understanding that if the input value is changed, ng-model updates the model while ng-bind doesn't.
I would greatly appreciate any advice.
HTML:
<form name="companies" class="clearfix" novalidate data-ng- hide="loadingIcon">
<table>
<tbody>
<tr data-ng-repeat="company in data | orderBy: 'NAME' | siftPage: startIndex: endIndex">
<td width="60%">
<span data-ng-hide="edit"> {{ company.NAME }} </span>
<div class="form-field col-sm-9" data-ng-show="edit">
<input type="text" data-ng-bind="company.NAME" />
</div>
</td>
<td>
<a class="icon edit" data-ng-click="edit = !edit; changed = edit ? edited(company) : changed(company);" href="#"></a>
</td>
<td>
<a class="icon delete" data-ng-click="removeCompany(company)" href="#"></a>
</td>
</tr>
</tbody>
</table>
I'm new to angular so please forgive me if I haven't included enough information. I will update update with any further information as requested.
I believe it is the ng-repeat with the orderBy: 'Name' clause that is the actual issue. It will make sure that the order is maintained even after an edit.
If you want to order initially before edits, copy the name as initialName onto each of your json objects and set the orderBy to 'initialName'. Since you wont be updating the initialName on an edit it wont update via the order by.
If you create the copy as a function to create the initialNames, you could call it through a button to re-sort the data.
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.
Within a ng-repeat I have a ng-switch conditional. I want the value of the ng-switch argument to be a binding. However the curly-bracket binding doesn't seem to be converted into the expected generated value. I'm aware that ng-switch creates a new scope, and that is surely causing the problem. I know about a 'dot' work-around but as the values here are coming from a service via a controller query, I can't figure out how to implement it in this situation.
html
<tr ng-repeat="user in users">
<td ng-switch on="editState"><p ng-switch-when="noEdit">{{user.username}}</p><input type="text" value="{{user.username}}" ng-switch-when="{{user.username}}"></td>
</tr>
controller.js
$scope.users = Users.query();
-edit-
this is the function that triggers the switch
$scope.editUser = function(usernameEdit) {
$scope.editState = usernameEdit;
};
A single $scope.editState won't work if you want to be able to edit multiple users at the same time. I suggest putting an edit property on each user, and use that property to control the ng-switch:
<tr ng-repeat="user in users">
<td ng-switch on="user.edit">
<span ng-switch-when="true">
<input type="text" value="{{user.username}}">
done
</span>
<p ng-switch-default>
edit {{user.username}}
</p>
</td>
</tr>
Fiddle