I am using ng-table for display data. i am using below code to do select all checkboxe. that select all check box insert using text/ng-template. if i use select all checkbox outside the ng-table, all functions work. but inside the ng-table with text/ng-template , functions not working.
$scope.selectAll = function() {
angular.forEach($scope.invoiceApprovalList, function(invoiceApproval) {
invoiceApproval.checkboxItem= $scope.selectedAll;
});
};
// use the array "every" function to test if ALL items are checked
$scope.checkIfAllSelected = function() {
$scope.selectedAll = $scope.invoiceApprovalList.every(function(invoiceApproval) {
return invoiceApproval.checkboxItem == true;
})
};
<script type="text/ng-template" id="all.html">
<input type="checkbox" ng-model="selectedAll" ng-click="selectAll()" />
</script>
<table ng-table="invoicetableParams" ng-show="invoicetableParams!=null" class="table scroll table-condensed table-bordered table-striped table-scroll" id="in-app">
<tbody>
<tr ng-repeat="invoiceApproval in $data">
<td header="'all.html'" class="row-center" style="width:20%">
<input class="myCheckBox" ng-model="invoiceApproval.checkboxItem" type="checkbox" ng-click="checkIfAllSelected()"/></td>
<td data-title="'Customer Name'" style="width:20%" filter="{'customerName':'text'}" sortable="'customerName'" class="row-center">
<div class="row-center">{{invoiceApproval.customerName}}</div>
</td>
<td data-title="'Invoice Number'" style="width:20%" sortable="'invoiceNumber'" class="row-center">
<div class="row-center">{{invoiceApproval.invoiceNumber}}</div>
</td>
<td data-title="'Invoice Date'" style="width:20%" class="row-center">
<div class="row-center">{{invoiceApproval.invoiceDate | date}}</div>
</td>
<!-- <td data-title="'Action'" class="row-center" style="text-align:right">
<button type="button" class="btn grid-btn row-view sm-btn" ng-click="loadCustomerInvoicePDFviewPDF(invoiceApproval.customerInvoiceHeaderID,1)">
<span class="glyphicon glyphicon-list"></span> Preview
</button>
</td> -->
</tr>
</tbody>
</table>
It does work as expected. Unfortunately you didn't show enough code to reproduce your problem. Please compare your solution and ensure your using ng-include in the right way:
View
<div ng-controller="MyCtrl">
<table ng-table="invoicetableParams" ng-show="invoicetableParams!=null" class="table scroll table-condensed table-bordered table-striped table-scroll" id="in-app">
<tbody>
<tr ng-repeat="invoiceApproval in data">
<td ng-include="'all.html'"></td>
<td data-title="'Customer Name'" style="width:20%" filter="{'customerName':'text'}" sortable="'customerName'" class="row-center">
<div class="row-center"> {{invoiceApproval.customerName}}</div>
</td>
<td data-title="'Invoice Number'" style="width:20%" sortable="'invoiceNumber'" class="row-center">
<div class="row-center">{{invoiceApproval.invoiceNumber}}</div>
</td>
<td data-title="'Invoice Date'" style="width:20%" class="row-center">
<div class="row-center">{{invoiceApproval.invoiceDate | date}}</div>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/ng-template" id="all.html">
<input type="checkbox" ng-model="invoiceApproval.checkboxItem" ng-click="selectAll()" />
</script>
AngularJS application
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.selectAll = function() {
$scope.data.forEach(function(invoiceApproval) {
return invoiceApproval.checkboxItem = true;
});
}
$scope.invoicetableParams = true;
$scope.data = [{
checkboxItem: false,
customerName: 'test name 1',
invoiceNumber: 'test name 1',
invoiceDate: new Date()
},
{
checkboxItem: false,
customerName: 'test name 2',
invoiceNumber: 'test name 2',
invoiceDate: new Date()
},
{
checkboxItem: false,
customerName: 'test name 3',
invoiceNumber: 'test name 3',
invoiceDate: new Date()
},
{
checkboxItem: false,
customerName: 'test name 4',
invoiceNumber: 'test name 4',
invoiceDate: new Date()
}
];
});
> demo fiddle
Related
I have multiple rows and I wish to get input value inside my tr refs but it returns undefined.
Code
Component
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<td><strong>Serial Number</strong></td>
<td><strong>Product</strong></td>
<td><strong>Amount</strong></td>
<td><strong>Price</strong></td>
<td width="50"></td>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in serial_numbers" :key="index">
<td>
<el-input ref="barcoded" v-model="row.barcode_id"></el-input>
</td>
<td>
<el-input ref="product" v-model="row.product"></el-input>
</td>
<td>
<el-input ref="amount" v-model="row.amount"></el-input>
</td>
<td>
<el-input ref="price" v-model="row.price" readonly></el-input>
</td>
<td>
<el-link v-on:click="removeElement(index);" style="cursor: pointer">Remove</el-link>
</td>
</tr>
</tbody>
</table>
<div>
<el-button type="primary" class="button btn-primary" round #click="addRow">Add row</el-button>
</div>
Script
methods: {
focusInput() {
this.$refs.barcode_id.focus();
},
addRow() {
var barcodes = document.createElement('tr');
this.serial_numbers.push({
barcode_id: '',
product: '',
amount: '',
price: ''
});
// try to get value of barcode input
console.log(this.refs.barcoded); // undefined
this.$nextTick(function () {
const nbBarcodes = this.$refs.barcoded.length;
this.$refs.barcoded[nbBarcodes - 1].focus();
});
},
}
Any idea?
Update
Demo
Using the serial_numbers object instead of refs
console.log(this.serial_numbers[this.serial_numbers.length - 1]);
// this was moved from above
this.serial_numbers.push({
barcode_id: '',
product: '',
amount: '',
price: ''
});
You should push the new element after retrieving the values you need
https://codepen.io/albertor24/pen/wvKYxOg
I'm not sure what could be the issue here but I'm using nuxt to make a SPA app. and I'm getting an error from an already compiled piece of code I got from codepen. link to codepen
https://codepen.io/jjelic/pen/yevNLZ?editors=1010
When I try this code my my nuxt app I get an error.
I've added a file called monitor.vue in pages folder and added the html and js like so
Is this root element error common as I have never encountered it before with html and how can I avoid?
Vue.filter('currencyDisplay', {
// model -> view
read: function(val) {
if (val > 0) {
return accounting.formatMoney(val, "$", 2, ".", ",");
}
},
// view -> model
write: function(val, oldVal) {
return accounting.unformat(val, ",");
}
});
Vue.directive('sortable', {
twoWay: true,
deep: true,
bind: function() {
var that = this;
var options = {
draggable: Object.keys(this.modifiers)[0]
};
this.sortable = Sortable.create(this.el, options);
console.log('sortable bound!')
this.sortable.option("onUpdate", function(e) {
that.value.splice(e.newIndex, 0, that.value.splice(e.oldIndex, 1)[0]);
});
this.onUpdate = function(value) {
that.value = value;
}
},
update: function(value) {
this.onUpdate(value);
}
});
var vm = new Vue({
el: '#app',
data: {
rows: [
//initial data
{
qty: 5,
description: "Something",
price: 55.20,
tax: 10
},
{
qty: 2,
description: "Something else",
price: 1255.20,
tax: 20
},
],
total: 0,
grandtotal: 0,
taxtotal: 0,
delivery: 40
},
computed: {
total: function() {
var t = 0;
$.each(this.rows, function(i, e) {
t += accounting.unformat(e.total, ",");
});
return t;
},
taxtotal: function() {
var tt = 0;
$.each(this.rows, function(i, e) {
tt += accounting.unformat(e.tax_amount, ",");
});
return tt;
}
},
methods: {
addRow: function(index) {
try {
this.rows.splice(index + 1, 0, {});
} catch (e) {
console.log(e);
}
},
removeRow: function(index) {
this.rows.splice(index, 1);
},
getData: function() {
$.ajax({
context: this,
type: "POST",
data: {
rows: this.rows,
total: this.total,
delivery: this.delivery,
taxtotal: this.taxtotal,
grandtotal: this.grandtotal,
},
url: "/api/data"
});
}
}
});
<template>
<div class="panel-body" id="app">
<table class="table table-hover">
<thead>
<tr>
<th style="width: 20px;">No.</th>
<th>Description</th>
<th style="width: 80px;">Qty</th>
<th style="width: 130px;" class="text-right">Price</th>
<th style="width: 90px;">Tax</th>
<th style="width: 130px;">Total</th>
<th style="width: 130px;"></th>
</tr>
</thead>
<tbody v-sortable.tr="rows">
<tr v-for="row in rows" track-by="$index">
<td>
{{ $index +1 }}
</td>
<td>
<input class="form-control" v-model="row.description" />
</td>
<td>
<input class="form-control" v-model="row.qty" number />
</td>
<td>
<input class="form-control text-right" v-model="row.price | currencyDisplay" number data-type="currency" />
</td>
<td>
<select class="form-control" v-model="row.tax">
<option value="0">0%</option>
<option value="10">10%</option>
<option value="20">20%</option>
</select>
</td>
<td>
<input class="form-control text-right" :value="row.qty * row.price | currencyDisplay" v-model="row.total | currencyDisplay"
number readonly />
<input type="hidden" :value="row.qty * row.price * row.tax / 100" v-model="row.tax_amount | currencyDisplay"
number />
</td>
<td>
<button class="btn btn-primary btn-xs" #click="addRow($index)">add row</button>
<button class="btn btn-danger btn-xs" #click="removeRow($index)">remove row</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-right">TAX</td>
<td colspan="1" class="text-right">{{ taxtotal | currencyDisplay }}</td>
<td></td>
</tr>
<tr>
<td colspan="5" class="text-right">TOTAL</td>
<td colspan="1" class="text-right">{{ total | currencyDisplay }}</td>
<td></td>
</tr>
<tr>
<td colspan="5" class="text-right">DELIVERY</td>
<td colspan="1" class="text-right"><input class="form-control text-right" v-model="delivery | currencyDisplay"
number /></td>
<td></td>
</tr>
<tr>
<td colspan="5" class="text-right"><strong>GRANDTOTAL</strong></td>
<td colspan="1" class="text-right"><strong>{{ grandtotal = total + delivery | currencyDisplay }}</strong></td>
<td></td>
</tr>
</tfoot>
</table>
<button #click="getData()">SUBMIT DATA</button>
<pre>{{ $data | json }}</pre>
</div>
</template>
This problem is actually a very simple problem. I don't know vue, but the render method has the same limits of react's one: every component must have only one root element in its template.
This means that a situation like this isn't accepted:
<template>
<div></div>
<div></div>
</template>
But like this is correct:
<template>
<div></div>
</template>
This means that surely, somehow in the code you didn't show us, you're putting two elements as root of your template
In this plunk I have two tables, one regular ng-table and an ng-table-dynamic with columns. Both point to the same data.
The second table doesn't show column titles, how to fix that?
HTML
<br/> Table 1
<table ng-table="tableParams" class="table table-bordered table-hover">
<tbody>
<tr ng-repeat="u in data" ng-dblclick="alert('double click')">
<td title="'User ID'">{{ u.uid }}</td>
<td title="'Group'">{{ u.ugr }}</td>
</tr>
</tbody>
</table>
<br/> Table 2
<table ng-table-dynamic="tableParams with cols" class="table table-bordered table-hover">
<tr ng-repeat="row in data">
<td title="col.nm" ng-repeat="col in cols">{{row[col.nm]}}</td>
</tr>
</table>
Javascript:
var app = angular.module('app', ['ngTable']);
app.controller('myCtl', function($scope,NgTableParams) {
$scope.cols = [ {nm:'uid'}, {nm:'ugr'} ];
$scope.data = [
{ uid: 'User 1',ugr: 'Group 1'},
{ uid: 'User 2', ugr: 'Group 2'}
];
$scope.tableParams = new NgTableParams({dataset: $scope.data});
});
You're missing the title property within your cols:
$scope.cols = [ {nm:'uid', title: 'User ID'}, {nm:'ugr', title: 'Group ID'} ];
See this plunkr.
My code is like this
<body>
<div>
<table ng-app='myApp' ng-controller="MainCtrl">
<thead>
</thead>
<tbody ng-repeat="prdElement in palletElement">
<tr><td>{{prdElement.name}}</td></tr>
<tr ng-repeat="data in prdElement.Data">
<td>
{{data.itemId}}
</td>
<td>
{{data.shipmentId}}
</td>
<td>
{{data.itemCode}}
</td>
<td>
{{data.description}}
</td>
<td>
{{data.handlingUnit}}
</td>
<td>
{{data.weight}}
</td>
<td>
{{data.class}}
</td>
<td>
{{data.lenght}}
</td>
<td>
{{data.width}}
</td>
<td>
{{data.height}}
</td>
<td>
{{data.flag}}
</td>
<td>
<input type="text" ng-model="data.quantity" placeholder=" Code" required />
</td>
</tr>
<tr>
<td>
<button ng-click="newPalletItem( prdElement,$event)">Submit</button>
</td>
</tr>
</tbody>
</table>
</div>
(function () {
angular.module('myApp', []).controller('MainCtrl', function ($scope) {
var counter = 0;
$scope.palletElement =
[{
name: 'Pallet 1',
Data:[{
name:'item 1' ,
itemId: '284307',
shipmentId: 'eb44f690-c97a-40e3-be2a-0449559e171a',
itemCode: '',
description: 'Bicycle parts - frame',
quantity: '31',
handlingUnit: 'CTN',
weight: '613.04',
class:'',
lenght: '102',
width: '42',
height: '61',
flag:'P'
}, {
name: 'item 2',
itemId: '284308',
shipmentId: 'eb44f690-c97a-40e3-be2a-0449559e171a',
itemCode: '',
description: 'Bicycle parts - fork',
quantity: '22',
handlingUnit: 'CTN',
weight: '242.99',
class: '',
lenght: '75',
width: '34',
height: '18',
flag: 'P'
}]
}]
$scope.newPalletItem = function (palletElement, $event) {
counter++;
angular.forEach(palletElement, function (value, key) {
palletElement.push(palletElement);
});
}
});
}());
on the last button click I am trying to duplicate entire tbody, but its not working. does any one have any idea?
Fiddle
Just Change $scope.newPalletItem function To:
$scope.newPalletItem = function (palletElement, $event) {
counter++;
$scope.palletElement.push(palletElement);
}
SEE DEMO
Problem Description
I am trying to create a simple Grid using AngularJS. Each cell in this grid has one text-input . There is one extra text-input(I call it global) whose ng-model should be dynamincally assigned to one of the grid-cell, whenever the user focus on that grid-cell.
Isn't that clear ?? Let me show my unsuccessful implementation :
The Markup
<body ng-controller="MainCtrl">
<b> Global : </b>
<input type="text", ng-model="global" size=50 />
<br />
<b> Grid : </b>
<table>
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td> <input type="text" ng-model="item.name" grid-input="global" /></td>
<td> <input type="text" ng-model="item.address" grid-input="global" /></td>
<td> <input type="text" ng-model="item.email" grid-input="global" /></td>
</tr>
</tbody>
</table>
</body>
The Angular App
var app = angular.module('app', []);
app.directive('gridInput', function($rootScope){
return {
restrict : 'AE'
, scope : {
model : '=ngModel'
, global : '=gridInput'
}
, link : function(scope, iElem, iAttrs) {
$(iElem).on('focus', function(e){
scope.global = scope.model;//what is this doing?? I don't KNOW!
})
}
}
});
app.controller('MainCtrl', function($scope) {
$scope.items = [
{name : 'Lekhnath Rijal', address:'Ilam, Nepal', email:'me#gmail.com'},
{name : 'abc def', address:'ghi, jkl', email:'mnop#qrst.uv'}
];
});
What do I want
I want two-way data binding between the global text-input and one of the grid-cell after the cell gets focused. The binding between these two inputs should persist until one of other grid-cell receives focus.
Here is a Plunker
Instead of using custom-directive, you can use ng-change, ng-focus to change the selected item.
index.html
<body ng-controller="MainCtrl">
<b> Global : </b>
<input type="text", ng-model="global.text" size=50 />
<br />
<b> Grid : </b>
<table>
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td>
<input
type="text"
ng-model="item.name"
ng-focus="global.text=item.name; setSelectedItem(item, 'name')"
ng-change="global.text=item.name"/>
</td>
<td>
<input
type="text"
ng-model="item.address"
ng-focus="global.text=item.address; setSelectedItem(item, 'address')"
ng-change="global.text=item.address"/>
</td>
<td>
<input
type="text"
ng-model="item.email"
ng-focus="global.text=item.email; setSelectedItem(item, 'email')" ng-change="global.text=item.email"/>
</td>
</tr>
</tbody>
</table>
</body>
app.js
app.controller('MainCtrl', function($scope) {
$scope.global = {};
$scope.items = [{
name: 'Lekhnath Rijal',
address: 'Ilam, Nepal',
email: 'me#gmail.com'
}, {
name: 'abc def',
address: 'ghi, jkl',
email: 'mnop#qrst.uv'
}];
$scope.$watch('global.text', function(text) {
if (text != undefined && $scope.selectedItem) {
$scope.selectedItem[$scope.selectedAttribute] = text;
}
}); $scope.setSelectedItem = function(item, attribute) {
$scope.selectedItem = item;
$scope.selectedAttribute = attribute;
}
});
Here is the plunker:
http://plnkr.co/edit/r7rIiT?p=preview