Just new to use Vue.js and I have a question:
I have a array to build a table. If I double click the table row, the program will call a javascript function to get the selected item by its index.
<div id="vm-table">
<table>
<tr v-for="(item, index) in items" ondblclick="getItem('{{ index }}')">
<td>{{ index }}</td>
<td>{{ item.pk }}</td>
<td>{{ item.description }}</td>
</tr>
</table>
</div>
<script>
var vm = new Vue({
el: "#vm-table",
data: {
items: []
}
});
</script>
I assume the array "items" already contains a list of items. In the above "tr" line it seems cannot get the "index" value and the value must be used in the inner "td" elements. If I need to get the parameter of index how can I do?
Thanks,
Try this instead :
<tr v-for="(item, index) in items" #dblclick="getItem(index)">
<td>{{ index }}</td>
<td>{{ item.pk }}</td>
<td>{{ item.description }}</td>
</tr>
Related
I'm trying to display the object name of a the suppliers array but i'm confused because its inside an array. I'm display the array and also i want to display the object name of the second array. But the problem is on the second array. The supplier.name is i want to display it. The pic is below
[PICTURE IS HERE][1]
ts
getAllMaterials() {
this.subscription = this.materialsService.getAll()
.subscribe(
(data:any) => {
this.materials = data.materials;
let suppliers = data.materials[0].suppliers;
console.log(data);
console.log(suppliers);
},
error => {
alert("Error");
console.log(error);
});
}
html
<tr *ngFor="let material of materials">
<td>{{ material.sku }}</td>
<td>{{ material.name }}</td>
<td>display on this td</td>
<td>{{ material.price }}</td>
<td>
</tr>
So you can do two things :
Solution 1 : If you have only single record in suppliers
<tr *ngFor="let material of materials">
<td>{{ material.sku }}</td>
<td>{{ material.name }}</td>
<td>{{material.suppliers[0].name}}</td>
<td>{{ material.price }}</td>
<td>
</tr>
Solution 2 :
If you want to show multiple names in same td :
<tr *ngFor="let material of materials">
<td>{{ material.sku }}</td>
<td>{{ material.name }}</td>
<td><span *ngFor ="let s of material.suppliers"> {{s.name}}
</span>
</td>
<td>{{ material.price }}</td>
<td>
</tr>
I encountered an error in replacing my row in my JQuery. This is my code snippet for my JQuery:
var newtr = '<td>'+data.row.createdDate+'</td>'+
'<td>'+data.row.emergencyOrderID+'</td>'+
'<td>'+data.row.firstName+' '+data.row.lastName+'</td>'+
'<td>('+data.row.latitude+','+data.row.longitude+')</td>'+
'<td>'+data.row.pickupLocation+'</td>'+
'<td>'+data.row.hospitalName+'</td>'+
'<td>'+data.row.driverName+'</td>'+
'<td>'+data.row.emergencyStatus+'</td>';
//$('#tbIDOrder-'+data.row.emergencyOrderID).html('test');
//alert('#tbIDOrder-'+data.row.emergencyOrderID);
$('#tbIDOrder-'+data.row.emergencyOrderID).parent().replaceWith(newtr);
and this is my row:
<tr id="tbIDOrder-{{$o->EmergencyOrderID}}">
<td>{{ $o->CreatedDate }}</td>
<td>{{ $o->EmergencyOrderID }}</td>
<td>{{ $o->FirstName }} {{ $o->LastName }}</td>
<td>({{ $o->Latitude }}), ({{ $o->Longitude }})</td>
<td>{{ $o->PickupLocation }}</td>
<td>{{ $o->HospitalName}}</td>
<td>{{ $o->DriverName}}</td>
<td>{{ $o->EmergencyStatus }}</td>
</tr>
am i missing something? If it helps, im running this code with Pusher in Laravel :) thanks for your time.
EDIT:
I replaced the script to:
$('#tbIDOrder-'+data.row.emergencyOrderID).html(newtr);
but it still didnt work
As $('#tbIDOrder-'+data.row.emergencyOrderID) refers to TR, You can directly use .html(htmlString) to update the content.
$('#tbIDOrder-'+data.row.emergencyOrderID).html(newtr);
Here is an example
$('#tbIDOrder-1').html('<td>New Date</td>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="tbIDOrder-1">
<td>CreatedDate</td>
</tr>
</table>
I need to get the previous & next value of the object (col2 from the object) in the same for loop iteration. Below is my index.html code:
<script>
var i = 1;
var j = 0;
</script>
{% for b in obj %}
<tr>
<td>{{ b.col1 }}</td>
<td><span class="wrapped"><span>{{ obj.j.col2 }}</span></span> </td>
<td id='myTable'></td>
<td id='myTable'></td>
<td>{{ b.col5 }}</td>
<td>{{ b.col6 }}</td>
<td>{{ b.col7 }}</td>
</tr>
<script>j=j+1;</script>
{% endfor %}
</table>
views.py:
def display(request):
return render_to_response('index.html', {'obj': my_model.objects.order_by('col2')})
What I tried was that when using: {{ obj.0.col2 }} or {{ obj.1.col2 }}, it displays the value of that cell correctly. However, when using {{ obj.j.col2 }}, it does not display anything. Why is this happening?? Why is it not reading j's value?? When I'm initializing j to 0 outside the loop and am incrementing value of j at the end of the loop as well!!
I have an application which shows data in tabular form which has columns
id, name, price, quantity
A am showing the data using ng-repeat Please see this
Plunker
<body ng-controller="myController">
<h1>Data</h1>
<table>
<tr>
<th>ID</th>
<th>NAME</th>
<th>PRICE</th>
<th>QUANTITY</th>
</tr>
<tr ng-repeat="item in myData">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
<td>{{ item.quantity }}</td>
</tr>
</table>
What I want to do is to add multiple filters in ng-repeat on this table
a) Filter by 'Name'
b) Filter by 'Price' OR 'Quantity'
It means that at any given point of time the result of the table should be filtered by combination of
i) EITHER 'Name' and 'Price'
ii) OR 'Name' and 'Quantity'
The Quantity filter should be inactive when Price filter is active and vice versa.
I will have 3 input fields for the filter parameters.
How can I apply filters to the ng-repeat in html to achieve this?
I suggest you create a custom filter and pass a custom filterObject, containing all filteroptions to this filter.
<tr ng-repeat="item in myData | myCustomFilter:filterObject">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
<td>{{ item.quantity }}</td>
</tr>
your filterobject would look like :
$scope.filterObject = {
id: false,
name: true,
price: false,
quantity: true
}
In myCustomFilter :
app.filter('myCustomFilter', function(items, filterObject) {
// filter your items depending on which filters are enabled
});
this is test myDatafilter
add in js
myDatafilter = function () {};
<h1>Data</h1>
<input type="text" ng-model="myDatafilter"/>
<tr ng-repeat="item in myData | filter:myDatafilter">
How I pass an object as a parameter in a ng-click within a ng-repeat?
Example:
<tr data-ng-repeat="table in tables">
<td>{{ table.name }}</td>
<td>{{ isActive(table.active) }}</td>
<td>{{ table.initialDate }}</td>
<td>{{ table.finalDate }}</td>
<td>
<button data-ng-click="updateTable(table)">Update</button>
</td>
</tr>
Inside the ng-click updateTable(HERE), I want to pass my object table.
Can someone help me?
In your component.html edit your code as shown below :
<td><button (click)=updateTable(table)>Update</button></td></tr>
then in your typescript code just declare the function
updateTable(table){
console.log(table); //write your own code here!.
}