I wanted to display a value in a row in ng-repeat based on the value from the database. i wanted to do some thing like this displayed below
I wanted to display if value T for TRAINER and M for MANAGER. could you give me a simple and efficient way to do it.
I think it is easy if you are used ng-if
<tr ng-repeat="item in list">
<td>{{ item.number }}</td>
<td ng-if="{{item.Role}} == 'TRAINER'">T</td>
<td ng-if="{{item.Role}} == 'MANAGER'">M</td>
</tr>
code not tested. just scratch to get an idea...
You can use ternaries in {{ }}
<tr ng-repeat="data in datas">
<td>{{ data.number }}</td>
<td>{{ data.value == 'T' ? 'TRAINER' : (data.value == 'M' ? 'MANAGER' : data.value) }}</td>
</tr>
Related
I started learning AngularJS a few days ago, and I wonder how do I get the name of a field in a JSON file.
{contador: "1159273", Code: "TCP_MISS/200", $$hashKey: "object:12"}
Thats one line of the json file, and I want to get the "contador" and "Code".
My objective is to do a table with that on top.
Here is my HTML code:
<table class="table">
<tr >
<td ng-repeat="(key, name) in $ctrl.logs.data">{{key}}</td>
</tr>
<tr ng-repeat="linha in $ctrl.logs.data">
<td>{{ linha.contador }}</td>
<td>{{ linha.Code }}</td>
</tr>
</table>
The "key" returns 0 1 2 ... and I want to get "contador" and "Code".
It is because your data is an array change this line
<td ng-repeat="(key, name) in $ctrl.logs.data">{{key}}</td>
with the following
<td ng-repeat="(key, name) in $ctrl.logs.data[0]">{{key}}</td>
Demo
I'm developping web appliccation using AngularJS.
Applicattion show a list of items in a table.
This is the code which prints the table:
<table>
<tr ng-repeat="x in content.listaOperaciones>
<td>{{ x.idOperacion }} </td>
<td>{{ x.idGan }}</td>
<td>{{ x.idEm}}</td>
<td>{{ x.idGate}}</td>
<td>{{ x.idRf }}</td>
<td>{{ x.peso }}</td>
<td>{{ x.duracion }}</td>
<td>{{ x.timestampInicioOperacion | date:'dd-MM-yy HH:mm'}}</td>
</tr>
</table>
This is how the table looks like once is printed in html.
I would like to implement multiple filters in each element in table by using some variables that can be accessed by user.
My idea is to filter each elements inside "ng-repeat" statement by using "ng-show" or "ng-if" statement.
This is the html code where user can modify variables:
<input ng-model="tiempoMinimo">
<input ng-model="$ctrl.PesoMinimo">
<input ng-model="$ctrl.PesoMaximo">
And this is how I'm modifying the table constructor:
<tr ng-repeat="x in content.listaOperaciones | orderBy : $ctrl.orderProp | filter:$ctrl.Busc" ng-if="x.peso > $ctrl.PesoMinimo && x.peso < $ctrl.PesoMaximo">
<div ng-show="x.duracion < $parent.tiempoMinimo">
<td>{{ x.idOperacion }} </td>
<td>{{ x.idGan }}</td>
<td>{{ x.idEm}}</td>
<td>{{ x.idGate}}</td>
<td>{{ x.idRf }}</td>
<td>{{ x.peso }}</td>
<td>{{ x.duracion }}</td>
<td>{{ x.timestampInicioOperacion | date:'dd-MM-yy HH:mm'}}</td>
</tr>
Filtering by using "ng-if" inside "ng-repeat" clausule is working.
Filtering by using "ng show" nested in "ng-repeat" loop is not working...
Since I want to use multiple filters (maybe 10 or 20) I would prefer using "ng-show" directive nested inside "ng-repeat" loop, so code would like easier to understand...
Here you have fiddle with source code working:
https://jsfiddle.net/DSG00/f94sjtty/
Thank you in advance.
Didac
Your fiddle isn't working because you can't use div inside tr. Move your ng-show to the tr element where your ng-repeat is. Also change the condition like that !$parent.tiempoMinimo || x.peso > $parent.tiempoMinimo so when your input is empty it won't hide the whole table.
I'm trying to display a table with activities, with a row displaying the day and after that the list of activities for this day. I also want the user to be able to filter the activities. "myActivities" is a Map with the user's activities assigned to true, and the rest to false. my code looks like this:
<table>
<tbody ng-repeat="date in dates">
<tr><td>{{date.day}}</td></tr>
<tr ng-repeat="activity in date.activities" ng-show="myActivities[activity.id] == true">
<td>{{activity.time}}</td><td>{{activity.name}}</td>
</tr>
</tbody>
</table>
The problem with that is when there is a day with no relevant activities for the user, the row displaying the date is still shown but all the activities under it are hidden.
I successfully solved the problem with this function:
$scope.checkDate = function(activities)
{
activities.forEach(function(activity){
if (myActivities[activity.id] == true) return true;
});
return false;
}
//added the ng-show to the tbody in the html:
<tbody ng-repeat="date in dates" ng-show="checkDate(date.activities)">
It works perfectly, but is this the best solution? I have a feeling that there is a nicer solution.
any ideas ?
Thanks!
You can assign the filtered variables to the date object, and check the length of that property:
<table>
<tbody ng-repeat="date in dates"
ng-show="date.filteredActivities.length">
<tr>
<td>{{ date.day }}</td>
</tr>
<tr ng-repeat="activity in (date.filteredActivities = (date.activities | filter: { active: true }))">
<td>{{ activity.time }}</td>
<td>{{ activity.name }}</td>
</tr>
</tbody>
</table>
I have a use case where I have a table, the row data has one way bindings applied, but I have a ng-show/hide conditional based on the same model. I also have a form that changes the model the ng-show/hide is bound to. The problem is, the form is triggering the show/hide when I only want the hide/show attributes to be parsed on load.
Markup:
<td>{{ item.print_id }}</td>
<td>{{ item.customer }}</td>
<td>{{ item.valet }}</td>
<td><span class="{{ ::item.status | lowercase }}">{{ ::item.status }}</span></td>
<td>{{ item.requested_at | date:'MM-dd-yyyy HH:mm' }}</td>
<td>${{ item.price }}</td>
<td><i data-ng-click="openEditForm( item )" class="glyphicon glyphicon-edit"></i></td>
<td><i data-ng-hide="item.status === 'Refunded' || item.status === 'Unused'" data-ng-click="openRefundModal( item )" class="glyphicon glyphicon-retweet"></i></td>
I have a modal with a form in it that changes the value of item.status. The one-way binding in the normal td works as expected but my conditional updates.
I know I could just assign the item.status as a class and hide it that way, but I'd rather see if there's an angular construct first.
Add other bool variable that will change when form is triggered, something like:
<td>{{ item.print_id }}</td>
<td>{{ item.customer }}</td>
<td>{{ item.valet }}</td>
<td><span class="{{ ::item.status | lowercase }}">{{ ::item.status }}</span></td>
<td>{{ item.requested_at | date:'MM-dd-yyyy HH:mm' }}</td>
<td>${{ item.price }}</td>
<td><i data-ng-click="openEditForm( item )" class="glyphicon glyphicon-edit"></i></td>
<td><i data-ng-hide="firstTime && (item.status === 'Refunded' || item.status === 'Unused')" data-ng-click="openRefundModal( item )" class="glyphicon glyphicon-retweet"></i></td>
In the controller inicialization set firstTime = true then in form event code set to false before anything. It's a bit tricky but simple.
I'm tring to figure out how I could us the ngSwitch with ngRepeatStart and End on two table rows, where second row is only shown when you click on the top one.
Here's what I've got and want to make work (doesn't work):
<tr
data-ng-repeat-start="user in users | filter : { name: search, active: searchActive }"
data-ng-click="selectUser(user)"
data-ng-switch on="isSelected(user)">
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>{{ user.active }}</td>
<td>{{ user.dob | date: 'EEEE, dd MMMM yyyy' }}</td>
</tr>
<tr data-ng-repeat-end data-ng-switch-when="true">
<td colspan="4">
{{ user.description }}
</td>
</tr>
and here's what works:
<tbody
data-ng-repeat="user in users | filter : { name: search, active: searchActive }"
data-ng-click="selectUser(user)"
data-ng-switch on="isSelected(user)">
<tr>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>{{ user.active }}</td>
<td>{{ user.dob | date: 'EEEE, dd MMMM yyyy' }}</td>
</tr>
<tr data-ng-switch-when="true">
<td colspan="4">
{{ user.description }}
</td>
</tr>
</tbody>
I would like to avoid the wrapping tbody tag and instead use ngRepeatStart / End.
Is there a way of modifying my first example to make it work?
Don't use ng-switch, just use ng-show or ng-if. Here's a plunker
Edit
Okay, I guess if you really want you can use ng-switch, though I would suggest not doing it if all you're doing is checking true/false. Here's the updated plunker. The trick is that the switch needs to be on the second <tr>, and the ng-switch-when needed to be on the <td>.
Now if you need each switch to be a table row, then you're just going to have to use ng-if. The ng-switch attribute needs to be on the parent of all the ng-switch-when's. That's why the switch only works when you put it on <tbody>, or when you switch over <td>'s.