ng-table header select all check box - javascript

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

Vuejs get $refs value in methods

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

Component template should contain exactly one root element nuxt

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

ngTable dynamic with columns doesn't show column titles

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.

Duplicating table fails in angularJS

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

Is it possible to dynamically assign `ng-model` in AngularJS

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

Categories