I can't seem to get the data to record into a new row when typed in, and it has since stopped displaying the dummy data when it did before. I really do not understand what I've done wrong so any expert feedback would be greatly appreciated.
new Vue({
el: '#app',
data: {
items: [
{
'id': 1,
'product': 'Mario Kart',
'cost': 39.99
},
{
'id': 2,
'product': 'Call of Duty',
'cost': 129.99
},
{
'id': 3,
'product': 'PS4',
'cost': 169.99
}
],
new_item: [
{
'id': '',
'product': '',
'cost': ''
}
]
},
// calculate total cost of all items
computed: {
result: function() {
return Object.values(this.items).reduce((t, {
cost
}) => t + cost, 0)
},
},
// add and remove items
methods: {
deleteItem: function(index) {
console.log("Removed", index);
this.items.splice(index, 1);
},
addItem: function() {
console.log("Added");
this.items.push({
'id': '',
'items.product': '',
'items.cost.toFixed(2)': ''
});
}
} // close methods
}); // close new Vue
<section class="section">
<div id="app" class="container">
<table class="table is-striped is-fullwidth">
<tr class="th">
<th>Index</th>
<th>Products</th>
<th>Cost</th>
<th></th>
</tr>
<tr class="items" v-for="(item, index) in items" :key="'itm'+index">
<td class="index"> {{ index+1 }} </td>
<td class="service"> {{ items.product }} </td>
<td class="price"> £{{ items.cost }} </td>
<td> <button class="button is-small is-danger" #click='deleteItem(index)'>Delete</button> </td>
</tr>
<tr class="add_new_item" v-for="(new_items, index) in new_item" :key="'new_itm'+index">
<th> </th>
<th> <input class="input is-small" type="text" placeholder="Item Name" v-model="new_items.product"> </th>
<th> <input class="input is-small" type="text" placeholder="The Price" v-model="new_items.cost"> </th>
<th> <button class="button is-info is-small" #click='addItem()'>Add To List</button> </th>
</tr>
<tr class="is-selected">
<td>Total</td>
<td></td>
<td>£{{ result.toFixed(2) }}</td>
<td></td>
</tr>
</table>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
I corrected several things,
Removing your new_item array it is not needed, you just need to store your input values in your data.
product: '',
cost: '',
lastIndex: 3
lastIndex is initialized to 3 due to you have already 3 items in your data items.
The object to be pushed in the items list and how to get that information.
this.items.push({
'id': this.lastIndex,
'product': this.product,
'cost': parseFloat(this.cost)
});
Here a parseFloat it perform because we get a string for the input. Extra work can be performed to check it is a number, or change the input to allow only numbers.
Removed you for iteration to show the insert new item.
Now it looks:
<tr class="add_new_item">
<th> </th>
<th> <input class="input is-small" type="text" placeholder="Item Name" v-model="product"> </th>
<th> <input class="input is-small" type="text" placeholder="The Price" v-model="cost"> </th>
<th> <button class="button is-info is-small" #click='addItem()'>Add To List</button> </th>
</tr>
and last, Modified how to read the information from the items list
<tr class="items" v-for="(item, index) in items" :key="'itm'+index">
<td class="index"> {{ item.id }} </td>
<td class="service"> {{ item.product }} </td>
<td class="price"> £{{ item.cost }} </td>
<td> <button class="button is-small is-danger" #click='deleteItem(index)'>Delete</button> </td>
</tr>
new Vue({
el: '#app',
data: {
items: [
{
'id': 1,
'product': 'Mario Kart',
'cost': 39.99
},
{
'id': 2,
'product': 'Call of Duty',
'cost': 129.99
},
{
'id': 3,
'product': 'PS4',
'cost': 169.99
}
],
product: '',
cost: '',
lastIndex: 3
},
// calculate total cost of all items
computed: {
result: function() {
return Object.values(this.items).reduce((t, {cost}) => t + cost, 0);
},
},
// add and remove items
methods: {
deleteItem: function(index) {
console.log("Removed", index);
this.items.splice(index, 1);
},
addItem: function() {
console.log("Added");
this.lastIndex += 1;
this.items.push({
'id': this.lastIndex,
'product': this.product,
'cost': parseFloat(this.cost)
});
this.product = '';
this.cost = '';
}
} // close methods
}); // close new Vue
<section class="section">
<div id="app" class="container">
<table class="table is-striped is-fullwidth">
<tr class="th">
<th>Index</th>
<th>Products</th>
<th>Cost</th>
<th></th>
</tr>
<tr class="items" v-for="(item, index) in items" :key="'itm'+index">
<td class="index"> {{ item.id }} </td>
<td class="service"> {{ item.product }} </td>
<td class="price"> £{{ item.cost }} </td>
<td> <button class="button is-small is-danger" #click='deleteItem(index)'>Delete</button> </td>
</tr>
<tr class="add_new_item">
<th> </th>
<th> <input class="input is-small" type="text" placeholder="Item Name" v-model="product"> </th>
<th> <input class="input is-small" type="text" placeholder="The Price" v-model="cost"> </th>
<th> <button class="button is-info is-small" #click='addItem()'>Add To List</button> </th>
</tr>
<tr class="is-selected">
<td>Total</td>
<td></td>
<td>£{{ result }}</td>
<td></td>
</tr>
</table>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
No need to create a new object for the New items and loop through it. I have modified your code. please refer below
new Vue({
el: '#app',
data: {
items: [
{
'id': 1,
'product': 'Mario Kart',
'cost': 39.99
},
{
'id': 2,
'product': 'Call of Duty',
'cost': 129.99
},
{
'id': 3,
'product': 'PS4',
'cost': 169.99
}
],
currentItemId: 0,
product: '',
cost: ''
},
// calculate total cost of all items
computed: {
result: function() {
return Object.values(this.items).reduce((t, {
cost
}) => t + cost, 0)
},
},
created: function() {
this.currentItemId = this.items.length + 1;
},
// add and remove items
methods: {
deleteItem: function(index) {
console.log("Removed", index);
this.items.splice(index, 1);
},
addItem: function() {
console.log("Added");
this.items.push({
'id': this.currentItemId++,
'product': this.product,
'cost': this.cost
});
this.product = '';
this.cost = '';
}
} // close methods
}); // close new Vue
<section class="section">
<div id="app" class="container">
<table class="table is-striped is-fullwidth">
<tr class="th">
<th>Index</th>
<th>Products</th>
<th>Cost</th>
<th></th>
</tr>
<tr class="items" v-for="(item, index) in items" :key="index">
<td class="index"> {{ index+1 }} </td>
<td class="service"> {{ item.product }} </td>
<td class="price"> £{{ item.cost }} </td>
<td> <button class="button is-small is-danger" #click='deleteItem(index)'>Delete</button> </td>
</tr>
<tr class="add_new_item">
<th> </th>
<th> <input class="input is-small" type="text" placeholder="Item Name" v-model="product"> </th>
<th> <input class="input is-small" type="text" placeholder="The Price" v-model="cost"> </th>
<th> <button class="button is-info is-small" #click='addItem()'>Add To List</button> </th>
</tr>
<tr class="is-selected">
<td>Total</td>
<td></td>
<td>£{{ result }}</td>
<td></td>
</tr>
</table>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
I have on table with 3 colums.There is no required field in my table.
when I click on save button each row should be save as separate object in a single array.
1.If document is not uploaded ,that can be empty.2.checkbox is checked it should be true otherwise false. 3.But Name should be in each object.
var app = angular.module('myApp', [])
app.controller('myController', function($scope) {
$scope.listName = [{
'name': 'aaa'
},{
'name': 'bbb'
},{
'name': 'ccc'
}];
$scope.saveDetails = function(doc) {
if ($('#status').is(':checked')) {
doc.status = 'true'
} else {
doc.status = 'false'
}
console.log(doc)
};
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController" ng-init="init()">
<table>
<thead>
<tr>
<th>Name</th>
<th>file</th>
<th>status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='doc in listName'>
<td>{{doc.name}}</td>
<td>
<input type="file" ng-model="doc.file" />
</td>
<td>
<input type="checkbox" ng-model="doc.status" />
</td>
</tr>
</tbody>
</table>
<button ng-click="saveDetails(doc)">save</button>
</div>
Any help?Thanks!!
you dont need to jquery methods
try follwing:
var app = angular.module('myApp', [])
app.controller('myController', function($scope) {
$scope.listName = [{
'name': 'aaa',
file: "",
status:false
},{
'name': 'bbb',
file: "",
status:false
},{
'name': 'ccc',
file: "",
status:false
}];
$scope.saveDetails = function(doc) {
console.log($scope.listName)
};
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController" ng-init="init()">
<table>
<thead>
<tr>
<th>Name</th>
<th>file</th>
<th>status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='doc in listName'>
<td>{{doc.name}}</td>
<td>
<input type="file" ng-model="doc.file" />
</td>
<td>
<input type="checkbox" ng-model="doc.status" />
</td>
</tr>
</tbody>
</table>
<button ng-click="saveDetails(doc)">save</button>
</div>
I tried to create a table with a dynamic number of titles and sub titles. It should look like this:
Each title has 3 sub titles. But I can not know in advance how much headline I will have.
So in HTML it looks like:
<table class="table table-hover col-xs-12">
<thead>
<tr>
<th rowspan="2">Type ID</th>
<th colspan="3" ng-repeat="val in ctrl.vals">
<div class="val">
<span title="{{val}}">{{val}}</span> <!-- this is title -->
</div>
</th>
</tr>
<tr>
<th class="row-header" ng-repeat="val in ctrl.getNumberColumn() track by $index">{{ $index%3 == 0 ? "subtitle1" : $index%3 == 1 ? "subtitle2" : "subtitle3" }}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="key in ctrl.keys">
<td class="row-key">{{key}}</td>
<td class="row-value" ng-repeat="val in ctrl.getNumberColumn() track by $index">
<div class="list-group" ng-init="data = ctrl.getDataByIndex($index, ctrl.items[key])">
<a class="list-group-item" ng-if="$index%3 == 0">{{data.avg_fps}} </a>
<a class="list-group-item" ng-if="$index%3 == 1">{{data.avg_cpu}} </a>
<a class="list-group-item" ng-if="$index%3 == 2">{{data.session}} </a>
</div>
</td>
</tr>
</tbody>
</table>
I understand that it looks confusing - so I would like to ask - is there an option for more simply constructing such a table?
angular.module('app', []).controller('ctrl', function($scope) {
$scope.titles = [{
title: 'One',
items: ['Sub1_1', 'Sub1_2']
}, {
title: 'Two',
items: ['Sub2_1']
},{
title: 'Three',
items: []
},
{
title: 'Four',
items: ['Sub4_1', 'Sub4_2', 'Sub4_3']
}];
})
table {
border-collapse: collapse;
}
table,
td,
th {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<div ng-app='app' ng-controller='ctrl'>
<table>
<thead>
<tr>
<th rowspan="2">TypeId</th>
<th ng-repeat='item in titles' colspan='{{item.items.length}}' rowspan='{{item.items.length > 0 ? 1 : 2}}'>
{{item.title}}
</th>
</tr>
<tr>
<th ng-repeat-start='item in titles' ng-if='false'></th>
<th ng-repeat-end ng-repeat='sub in item.items'>{{sub}}</th>
</tr>
</thead>
</table>
</div>
i m just learn vue.js
and i want to display a table data.my opinion is when display mode the table just show. and when i click edit button of the line of the table, i want this line convert to model.
this is my code:
```
<table class="table table-bordered">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>pass</th>
<th>action</th>
</tr>
</thead>
<tbody>
<template v-for="data in apidata" track-by="$index">
<tr>
<td>{{$index + 1}}</td>
<td>
<div v-show="data.editmode"><input v-model="data.name"></div>
<div v-else>{{data.name}}</div>
</td>
<td>
<div v-if=data.editmode><input v-model="data.name"></div>
<div v-else>{{data.name}}</div>
</div>
</td>
<td>
<button v-on:click="remove($index)" class="btn btn-danger">remove</button>
<button v-on:click="edit(data)" class="btn btn-danger">edit</button>
</td>
</tr>
</template>
</tbody>
</table>
```
my data is like this
[{name:'test', pass:'1'}, {name:'test2', pass:'2'}]
i bind a edit()function to listen the click event.
edit: function(data){
alert(data.editmode);
data.editmode = true;
}
i think when i click .becuase the data.editmode will change to true.
this line will convert to input mode . but its useless.
i have tried v-if=data.editmode , v-if="data.editmode" ,v-show="data.editmode" , still got nothing
i dnt know why?
You just need to include editmode in your data declaration so that it is a reactive data item.
new Vue({
el: 'body',
data: {
apidata: [{
name: 'test',
pass: '1',
editmode: false
}, {
name: 'test2',
pass: '2',
editmode: false
}]
},
methods: {
edit: function(data) {
data.editmode = !data.editmode;
}
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.27/vue.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>pass</th>
<th>action</th>
</tr>
</thead>
<tbody>
<tr v-for="data in apidata">
<td>{{$index + 1}}</td>
<td>
<div v-if="data.editmode">
<input v-model="data.name">
</div>
<div v-else>{{data.name}}</div>
</td>
<td>
<div v-if=data.editmode>
<input v-model="data.pass">
</div>
<div v-else>{{data.pass}}</div>
</td>
<td>
<button v-on:click="remove($index)" class="btn btn-danger">remove</button>
<button v-on:click="edit(data)" class="btn btn-danger">edit</button>
</td>
</tr>
</tbody>
</table>
I am trying to show the same select with the same values and functions on a table. I am using the foreach binding to bind to my table objects. Here is what my code looks like:
<table class="table table-bordered" >
<thead>
<tr>
<th>Nextable Name</th>
<th>POS Name</th>
</tr>
</thead>
<tbody data-bind="foreach: tables">
<tr>
<td data-bind="text: name"></td>
<td><select class="select2 span8 dropdown" data-placeholder="Select Pos Table" data-bind="options: $parent.omnivoreTables, optionsText: 'name', optionsValue:'id', value: $parent.selectedOmnivoreTableId"></select></td>
</tr>
</tbody>
</table>
For some reason, the dropdowns all say undefined and are not selectable at all. I inspect the page and the dropdown elements and they all have the correct options and values inside as if this worked, but it doesn't. Any help much appreciated!
Is this what you want it to do?
var vm = {
omnivoreTables: [
{name: 'One',
id: '1'},
{name: 'Two',
id: '2'}
],
selectedOmnivoreTableId: ko.observable(1),
tables: ko.observableArray([
{name: 'First'},
{name: 'Second'},
{name: 'Third'}
])
};
ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<th>Nextable Name</th>
<th>POS Name</th>
</tr>
</thead>
<tbody data-bind="foreach: tables">
<tr>
<td data-bind="text: name"></td>
<td>
<select class="span8 dropdown" data-placeholder="Select Pos Table" data-bind="options: $parent.omnivoreTables, optionsText: 'name', optionsValue:'id', value: $parent.selectedOmnivoreTableId"></select>
</td>
</tr>
</tbody>
</table>