I want to use the if-directive in vue.js to determine which datafield should be shown in each table row:
<tr v-repeat="model">
<td>#{{ title }}</td>
<td>#{{ publish_date_start }}</td>
<td v-if="model.publish = 1"><span class="fa fa-check"></span></td>
<td v-if="model.publish = 0"><span class="fa fa-remove"></span></td>
<td class="data-list-action">edit</td>
<td class="data-list-action">delete</td>
</tr>
If the value of the property 'publish' is 1, the datafield with the check has to be shown. If 0, it has to be the a cross.
How can I compare 'model.publish' to a value?
UPDATE: Fiddle
Try with v-if:
<td v-if="publish"><span class="fa fa-check">Check</span></td>
<td v-if="!publish"><span class="fa fa-remove">Cross</span></td>
Fiddle: http://jsfiddle.net/8wy7w560/3/
Related
I'm having a trouble, why in my console didn't reflect the other td values title and date, it only reflects the id of my table. It would be great if anybody could figure out where I am doing something wrong. thank you so much in advance
table tbody
<tbody>
{% csrf_token %}
{% for folder in folder_list %}
<tr>
<td> <i class="fas fa-edit fa-lg"></i></td>
<td data-target="title">{{folder.title}}</td>
<td data-target="date_upload">{{folder.date_upload}}</td>
</tr>
{% endfor %}
</tbody>
script
$(document).on('click', 'a[data-role=updategalleryss]', function(){
var id = $(this).data('id');
var title = $('#'+id).children('td[data-target=title]').text();
var dateto = $('#'+id).children('td[data-target=date_upload]').text();
console.log(id) #it only read this
console.log(title)
console.log(dateto)
});
document.getElementById(id).querySelector('td[data-taget="title"]').innerText
or
$("#"+id).find("td[data-taget=title]").text()
you can get title of td
You can use $(this).parent("td").siblings() to get datas from other tds where a tag is clicked.
Demo Code :
$(document).on('click', 'a[data-role=updategalleryss]', function() {
var id = $(this).data('id');
//use this ->parent td -> siblings
var title = $(this).parent("td").siblings('td[data-target=title]').text();
var dateto = $(this).parent("td").siblings('td[data-target=date_upload]').text();
console.log(id)
console.log(title)
console.log(dateto)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td> <i class="fas fa-edit fa-lg">edit</i></td>
<td data-target="title">somthing</td>
<td data-target="date_upload">ok</td>
</tr>
<tr>
<td> <i class="fas fa-edit fa-lg">edit</i></td>
<td data-target="title">somthing2</td>
<td data-target="date_upload">ok2</td>
</tr>
<tr>
<td> <i class="fas fa-edit fa-lg">edit</i></td>
<td data-target="title">somthing3</td>
<td data-target="date_upload">ok3</td>
</tr>
</tbody>
</table>
Our angular 2 application has a html table, that displays data from the database. Now we need to make few items editable in the table. I have made the needed items editable and added the button update, when clicked on the update button I need to get the edited value of the row along with the id of the row.
Please help me how to achieve it. Given below is my code.
<tr *ngFor="let row of tableData;">
<td >{{ row.id}}</td>
<td contenteditable="true">{{ row.editableData1 }}</td>
<td contenteditable="true">{{ row.editableData2}}</td>
<td style="color: black;">{{ row.user }}</td>
<td class="link">
<button (click)="updatetoDB()" type="button"> Update </button>
</td>
</tr>
So When user clicks on the Update Button, I need to get the edited data and the id of the row. Thank you in Advance :)
#data1 method maybe not work because td element does not have value attribute.
Can you try to add an input element into your td like this :
<tr *ngFor="let row of tableData;">
<td >{{ row.id}}</td>
<td contenteditable="true"><input type="text" [value]="row.editableData1" #data1/></td>
<td contenteditable="true"><input type="text" [value]="row.editableData2" #data2/></td>
<td style="color: black;">{{ row.user }}</td>
<td class="link">
<button (click)="updatetoDB(data1, data2, row.id)" type="button">Update</button>
</td>
</tr>
I think it should be working, but you habe to include an input element into your td.
It's annoying ?
Hi,
The best solution is to use reactive form.
But i think you can name the edited data and pass it to your fonction updateToDB like this :
<tr *ngFor="let row of tableData;">
<td >{{ row.id}}</td>
<td contenteditable="true" #data1>{{ row.editableData1 }}</td>
<td contenteditable="true" #data2>{{ row.editableData2}}</td>
<td style="color: black;">{{ row.user }}</td>
<td class="link">
<button (click)="updatetoDB(data1, data2, row.id)" type="button"> Update </button>
</td>
</tr>
Log the content of data1 ans data2 variables, i think tour data should be in data1.value ans data2.value.
Hope that help you.
So I need to be able to expand some details on each row of a table. Right now I'm having two issues:
Clicking the expand/collapse toggle will trigger the action for every row in the table.
The first row always puts the details above it.
Here's the code segment:
<tbody>
<tr *ngFor="let client of clients">
<td class="details-control">
<a class="btn btn-link" (click)="collapsed1=!collapsed1">
<i class="material-icons">
expand_more
</i>
</a>
</td>
<td>{{client.firstName}}</td>
<td>{{client.lastName}}</td>
<td>{{client.company}}</td>
<td><input type="checkbox"></td>
</tr>
<div *ngIf="!collapsed1">
<p>Details</p>
</div>
</tbody>
And what it looks like:
Toggling
Also I had my *ngFor statement in the tag earlier but I realized I can't hit individual client objects if I build a separate for details.
Let me know how I can improve!
It's a very common pattern.
The best and quick solution is to use some ID instead of just a boolean in your collapsed1 variable.
<tbody>
<tr *ngFor="let client of clients">
<td class="details-control">
<a class="btn btn-link" (click)="collapsed1 = collapsed1 ? 0 : client.id ">
<i class="material-icons">
expand_more
</i>
</a>
</td>
<td>{{client.firstName}}</td>
<td>{{client.lastName}}</td>
<td>{{client.company}}</td>
<td><input type="checkbox"></td>
<div *ngIf="collapsed1=client.id">
<p>Details</p>
</div>
You need a boolean array collapsed[] and use index in your ngFor, so you can use collapsed[i]. Take a look here for using index in ngFor:
ngFor using Index
Let me know if you need more info. Wellcome
Nevermind, here is the code that solved it.
<tbody>
<tr *ngFor="let client of clients; let i = index">
<td class="details-control">
<a class="btn btn-link" (click)="client.hideme=!client.hideme">
<i class="material-icons" *ngIf="!client.hideme">
expand_more
</i>
<i class="material-icons" *ngIf="client.hideme">
expand_less
</i>
</a>
</td>
<td width="30%">{{client.firstName}}
<tr *ngIf="client.hideme">
<td>Hey, I'm a bunch of details!</td>
</tr>
</td>
<td>{{client.lastName}}</td>
<td>{{client.company}}
<tr *ngIf="client.hideme">
<td>More Issuer details</td>
</tr>
</td>
<td><input type="checkbox"></td>
</tr>
</tbody>
I have an array called "design", with dynamic length. I want to show all the elements of this array in more cells of a table. I write this code:
<tr style="cursor:pointer" data-ng-repeat="i in [0,1,2,3,4,5]">
<td ng-click="changePath(dispensercategory.dispenser.iddispenser)"> {{ design[$index] }}</td>
</tr>
but I want to repeat data for i in [0, . . . , design.length], not to 5. Length of design is not 5, but it change dynamically
You should be able to do (if no duplicates in design):
<tr style="cursor:pointer" ng-repeat="obj in design">
<td ng-click="changePath(dispensercategory.dispenser.iddispenser)"> {{ obj }}</td>
</tr>
Or (if duplicates in design):
<tr style="cursor:pointer" ng-repeat="obj in design track by $index">
<td ng-click="changePath(dispensercategory.dispenser.iddispenser)"> {{ obj }}</td>
</tr>
Solved in this way:
<tr style="cursor:pointer" ng-repeat="i in getNumber(design.length) track by $index">
<td ng-click="changePath(dispensercategory.dispenser.iddispenser)"> {{ design[$index] }}</td>
</tr>
And in my js file:
$scope.getNumber = function(num) {
return new Array(num);
}
I have list of "cases" in a table, where I need to find specific one just by NAME and click on it.
My HTML looks like:
<tr ng-repeat-start="case in cases | orderBy:order:order_reverse" class="middle ng-scope odd readonly" ng-class-odd="'odd'" ng-class-even="'even'" ng-class="{readonly: !caseManager.isWritable(case)}">
<td>
<span ax-sharing-circle="SHARED_WITH_PARTNER" class="ng-isolate-scope"><span class="icon sharing-circle sharing-circle-left" title="Sdílený"></span></span>
</td>
<td class="case-table-claim-number fix-v-align">
<a ui-sref="case.general({caseId: case.caseId})" class="ng-binding" href="#/case/0a0b1c2a-94b4-444c-a2b8-c62cbd3532ae/general">20150629-165000-65</a>
</td>
<td class="case-table-claim-number fix-v-align ng-binding"></td>
<td class="case-table-claim-number fix-v-align ng-binding"></td>
<td class="case-table-make fix-v-align ng-binding"></td>
<td class="case-table-make fix-v-align ng-binding"></td>
<td class="case-table-status fix-v-align ng-binding">
29.6.2015
</td>
<td class="case-table-status fix-v-align ng-binding"></td>
<td>
<span class="glyphicon glyphicon-menu-down" ng-class="{
'glyphicon glyphicon-menu-up': hasOverview(case.caseId),
'glyphicon glyphicon-menu-down': !hasOverview(case.caseId),
}" ng-click="toggleOverview(case.caseId)"></span>
</td>
</tr>
In example above you can find string 20150629-165000-65 which is name of the case.
I try to write something like this:
element(by.cssContainingText('a', global.caseNumber)).click();
which should find element and click on it, instead of that it throw error:
No element found using locator: by.cssContainingText("a", "20150629-165000-65")
Can someone advise me how to do this?
There is a relevant by.linkText() locator that should fit the use case:
var link = element(by.linkText(global.caseNumber));
If it still doesn't find the desired element, try adding a wait:
var EC = protractor.ExpectedConditions;
browser.wait(EC.presenceOf(link), 5000);