Please help. I am stuck at this point for more then 14 hours and I can't find an explanation or an example.
This is what I have now:
http://plnkr.co/edit/PaYR7c0QXSKxl1jcmRBQ
If I don't use angular-routing, ngTable works correctly. As soon as I add routing, it gives this error.
The error disappears when I comment $scope.tableParams = new ngTableParams({
...but then the data is not showing.
The code that does not work:
var app = angular.module('main', [
'ngRoute',
'ngTable'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {templateUrl: 'partial1.html', controller: 'MyCtrl1'});
$routeProvider.otherwise({redirectTo: '/'});
}]);
app.controller('MyCtrl1', [function($scope,ngTableParams) {
var data = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
total: data.length, // length of data
getData: function($defer, params) {
$defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
}]);
</script>
</head>
<body ng-app="main">
<div ng-view=""></div>
</body>
The HTML header should be corrected: (you were loading ngTable before angular)
<script>document.write('<base href="' + document.location + '" />');</script>
<script data-require="angular.js#*" data-semver="1.2.10" src="http://code.angularjs.org/1.2.10/angular.js"></script>
<script data-require="angular-route#*" data-semver="1.2.10" src="http://code.angularjs.org/1.2.10/angular-route.js"></script>
<script data-require="ng-table#*" data-semver="0.3.0" src="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.js"></script>
The controller declaration is a little off.
app.controller('MyCtrl1', ['$scope', 'ngTableParams', function MyCtrl1($scope, ngTableParams) {
Related
Hi am trying to put this script on my file.
<template>
<b-table striped hover :items="items"></b-table>
</template>
<script>
const items = [
{ isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
{ isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
{ isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
{ isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
]
export default {
data () {
return {
items: items
}
}
}
</script>
in my file i take the data not from const items like the example but i use this script:
computed: {
siteObject() {
console.log(this.site);
return this.site;
},
how can put this info in my table ?
i use this to show my data:
<div v-for="(item, index) in siteObject.cases" :key="index" >
i've been struggling for almost 6 hours with this, but i didn't find a way to accomplish what i need.
the thing is that i need to filter the table of bootstrap vue with a function, but i can't make it work, there is a step that i need, but i can't find it.
here it is a jsfiddle that i grab from the web, that has the simple b-table with property filter.
https://jsfiddle.net/rothariger/oxbrhcqk/1/
now if you check on this example I've replaced the property for a function, but, it just get called in the load, when you change the filter textbox, it doesn't do anything, and here is where i think i'm missing a step.
https://jsfiddle.net/rothariger/oxbrhcqk/3/
new Vue({
el: '#app',
data: {
items: [{
isActive: true,
age: 40,
name: {
first: 'Dickerson',
last: 'Macdonald'
}
}, {
isActive: false,
age: 21,
name: {
first: 'Larsen',
last: 'Shaw'
}
}, {
isActive: false,
age: 9,
state: 'success',
name: {
first: 'Mitzi',
last: 'Navarro'
}
}, {
isActive: false,
age: 89,
name: {
first: 'Geneva',
last: 'Wilson'
}
}, {
isActive: true,
age: 38,
name: {
first: 'Jami',
last: 'Carney'
}
}, {
isActive: false,
age: 27,
name: {
first: 'Essie',
last: 'Dunlap'
}
}, {
isActive: true,
age: 40,
name: {
first: 'Dickerson',
last: 'Macdonald'
}
}, {
isActive: false,
age: 21,
name: {
first: 'Larsen',
last: 'Shaw'
}
}, {
isActive: false,
age: 26,
name: {
first: 'Mitzi',
last: 'Navarro'
}
}, {
isActive: false,
age: 22,
name: {
first: 'Geneva',
last: 'Wilson'
}
}, {
isActive: true,
age: 38,
name: {
first: 'Jami',
last: 'Carney'
}
}, {
isActive: false,
age: 27,
name: {
first: 'Essie',
last: 'Dunlap'
}
}],
fields: {
name: {
label: 'Person Full name',
sortable: true
},
age: {
label: 'Person age',
sortable: true
},
isActive: {
label: 'is Active'
},
actions: {
label: 'Actions'
}
},
currentPage: 1,
perPage: 5,
filter: null
},
methods: {
details(item) {
alert(JSON.stringify(item));
},
filterGrid(val) {
console.log(val);
return true;
}
}
})
any info on what i have to do?
regards.
As Vue Bootstrap introdues:,
The filter prop value can be a string, a RegExp or a function
reference. If a function is provided, the first argument is the
original item record data object. The function should return true if
the record matches your criteria or false if the record is to be
filtered out.
Then look into the source code at Vue Bootstrap Github, you will find Vue Bootstrap only invoke your filter function inside one computed property=computedItems.
So for your case:
filterGrid(val) {
console.log(val);
return true;
}
It does not trigger any reactivity (print then always return true), so it will do nothing (computed property=computedItems will not be re-calculated, so filter function will not be executed either).
so one simple filter function with reactivity will be like:
filterGrid(val){
return !this.filter || JSON.stringify(val).includes(this.filter)
}
Also you can involves other data/prop/computed property, the filter function will be executed also when reactivity is triggered.
The full demo:
new Vue({
el: '#app',
data: {
items: [{
isActive: true,
age: 40,
name: {
first: 'Dickerson',
last: 'Macdonald'
}
}, {
isActive: false,
age: 21,
name: {
first: 'Larsen',
last: 'Shaw'
}
}, {
isActive: false,
age: 9,
state: 'success',
name: {
first: 'Mitzi',
last: 'Navarro'
}
}, {
isActive: false,
age: 89,
name: {
first: 'Geneva',
last: 'Wilson'
}
}, {
isActive: true,
age: 38,
name: {
first: 'Jami',
last: 'Carney'
}
}, {
isActive: false,
age: 27,
name: {
first: 'Essie',
last: 'Dunlap'
}
}, {
isActive: true,
age: 40,
name: {
first: 'Dickerson',
last: 'Macdonald'
}
}, {
isActive: false,
age: 21,
name: {
first: 'Larsen',
last: 'Shaw'
}
}, {
isActive: false,
age: 26,
name: {
first: 'Mitzi',
last: 'Navarro'
}
}, {
isActive: false,
age: 22,
name: {
first: 'Geneva',
last: 'Wilson'
}
}, {
isActive: true,
age: 38,
name: {
first: 'Jami',
last: 'Carney'
}
}, {
isActive: false,
age: 27,
name: {
first: 'Essie',
last: 'Dunlap'
}
}],
fields: {
name: {
label: 'Person Full name',
sortable: true
},
age: {
label: 'Person age',
sortable: true
},
isActive: {
label: 'is Active'
},
actions: {
label: 'Actions'
}
},
currentPage: 1,
perPage: 5,
filter: null
},
methods: {
details(item) {
alert(JSON.stringify(item));
},
filterGrid(val){
return !this.filter || JSON.stringify(val).includes(this.filter)
}
}
})
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css"/>
<!-- Add this after vue.js -->
<script src="https://unpkg.com/vue#2.5.17/dist/vue.min.js"></script>
<script src="https://unpkg.com/babel-polyfill#latest/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
<div id="app">
<div class="justify-content-centermy-1 row">
<b-form-fieldset horizontal label="Rows per page" class="col-6" :label-size="6">
<b-form-select :options="[{text:5,value:5},{text:10,value:10},{text:15,value:15}]" v-model="perPage">
</b-form-select>
</b-form-fieldset>
<b-form-fieldset horizontal label="Filter" class="col-6" :label-size="2">
<b-form-input v-model="filter" placeholder="Type to Search"></b-form-input>
</b-form-fieldset>
</div>
<!-- Main table element -->
<b-table striped hover :items="items" :fields="fields" :current-page="currentPage" :per-page="perPage" :filter="filterGrid">
<template slot="name" scope="item">
{{item.value.first}} {{item.value.last}}
</template>
<template slot="isActive" scope="item">
{{item.value?'Yes :)':'No :('}}
</template>
<template slot="actions" scope="item">
<b-btn size="sm" #click="details(item.item)">Details</b-btn>
</template>
</b-table>
<div class="justify-content-center row my-1">
<b-pagination size="md" :total-rows="this.items.length" :per-page="perPage" v-model="currentPage" />
</div>
</div>
I have a Vue.js component/view that shows the data as follows:
<tbody v-for="item in items">
<tr>
<td width="15%"><img :src="item.image"></td>
<td width="50%">{{item.name}}</td>
<td>{{item.purchasedate | moment(" MMMM Do YYYY") }}</td>
<td>${{item.price}}</td>
<td>Item destination link</td>
</tr>
</tobdy>
The data is powered by a simple axios get call that returns the items array. I need to implement a search and sort function. I have tried several out of box components. Including out of box components available on NPM e.g. vue-good-table, vue-table-component, and grid-component. There are two issues I am facing with these
1. The image cannot be displayed and it only returns the URL
2. Date cannot be formatted - I am using moment.js for that.
I would like to sort by name, price, and purchasedate while displaying the image. Any suggestions?
with vue-good-table,you can set column option like this:
columns: [
{
label: 'photo',
field: 'photo',
html: true
},
{
label: 'Name',
field: 'name',
filterOptions: {
enabled: true,
},
},
{
label: 'Age',
field: 'age',
type: 'number',
},
{
label: 'Created On',
field: 'createdAt',
formatFn: v=>moment(v).format(" MMMM Do YYYY")
},
{
label: 'Percent',
field: 'score',
type: 'percentage',
},
],
and data like this:
rows: [
{ id:1,photo:"/static/logo.png", name:"John", age: 20, createdAt: '201-10-31:9: 35 am',score: 0.03343 },
{ id:2,photo:"/static/logo.png", name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
{ id:3,photo:"/static/logo.png", name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 },
{ id:4,photo:"/static/logo.png", name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 },
{ id:5,photo:"/static/logo.png", name:"Dan", age: 40, createdAt: '2011-10-21', score: 0.03343 },
{ id:6,photo:"/static/logo.png", name:"John", age: 20, createdAt: '2011-10-31', score: 0.03343 },
{ id:7,photo:"/static/logo.png", name:"Jane", age: 24, createdAt: '20111031' },
{ id:8,photo:"/static/logo.png", name:"Susan", age: 16, createdAt: '2013-10-31', score: 0.03343 },
].map(o=>({
...o,
photo:`<img width="80" height="80" src="${o.photo}"/>`
}))
and the result is:
I can accomplish what I need with filter/map and perhaps reduce, but I want to know - as it can be very nifty and succinct in accomplishing things... if I had an array of objects like so:
Please try do it through xorBy
> var arr = [
{name: "bill", id: 909},
{name: "tina", id: 444},
{name: "ron", id: 24},
{name: "paul", id: 4445}];
> var remove_arr = _.xorBy(arr, [{name: "ron", id: 24}], 'id');
> remove_arr
[{name: "bill", id: 909},
{name: "tina", id: 444},
{name: "paul", id: 4445}];
> var add_arr = _.xorBy(arr, [{name: "mary", id: 887}], 'id');
> add_arr
[{name: "bill", id: 909},
{name: "tina", id: 444},
{name: "ron", id: 24},
{name: "paul", id: 4445},
{name: "mary", id: 887}];
Im trying to load data into a list using a store. When i run my code the list value is blank, the list is not empty but it is blank.
Here is the part of my controller where i try to add data to store.
var loginStore = Ext.getStore('instance');
var record = [{id:id, issued_at:issued, instance_url:instance, signature:sig, access_token:access, myBaseUri:baseUri}];
loginStore.add(record);
Here is the part of the view where i make the list
{
xtype :'list',
id : 'list1',
loadingText: 'Loading Projects',
emptyText: '<div>No Projects Found</div>',
onItemDisclosure: true,
itemTpl: '<div>{issued_at}</div>',
height: 320,
store : 'instance'
}
This doesnt work but when i replace itemTpl:'<div>{issued_at}</div>' with
itemTpl:'<div>{id}</div>'
it seems to work. What am I doing wrong?
Here is my store:
Ext.define('GS.store.instance',{
extend: 'Ext.data.Store',
requires: ['GS.model.login'],
config:{
model: 'GS.model.login'
}
});
And here is my model:
Ext.define('GS.model.login',{
extend: 'Ext.data.Model',
fields:[
{name: 'id', type: 'string'},
{name: 'issued_at', type:'string'},
{name: 'instance_url', type:'string'},
{name: 'signature', type:'string'},
{name: 'access_token', type:'string'},
{name: 'myBaseUri', type:'string'}
]
});
The way you create your record is wrong. Try this way :
var record = Ext.create('YOUR_MODEL', {
id : id,
issued_at: issued,
instance_url: instance,
...
});
Hope this helps.
Try it using this example:
Ext.define('Contact', {
extend: 'Ext.data.Model',
config: {
fields: ['firstName', 'lastName']
}
});
var store = Ext.create('Ext.data.Store', {
model: 'Contact',
},
data: [
{ firstName: 'Tommy', lastName: 'Maintz' },
{ firstName: 'Rob', lastName: 'Dougan' },
{ firstName: 'Ed', lastName: 'Spencer' },
{ firstName: 'Jamie', lastName: 'Avins' },
{ firstName: 'Aaron', lastName: 'Conran' },
{ firstName: 'Dave', lastName: 'Kaneda' },
{ firstName: 'Jacky', lastName: 'Nguyen' },
{ firstName: 'Abraham', lastName: 'Elias' },
{ firstName: 'Jay', lastName: 'Robinson'},
{ firstName: 'Nigel', lastName: 'White' },
{ firstName: 'Don', lastName: 'Griffin' },
{ firstName: 'Nico', lastName: 'Ferrero' },
{ firstName: 'Jason', lastName: 'Johnston'}
]
});
Ext.create('Ext.List', {
fullscreen: true,
itemTpl: '<div class="contact">{firstName} <strong>{lastName}</strong></div>',
store: store,
});
As you get values in the list when using id instead of issued_at, the problem seems to be, not with the functions/models/store so much, but with the issued_at variable itself. Are you certain it's getting through to the store?
Try adding this when your store has loaded, or run it in the browser using for instance chrome
console.log(Ext.getStore("instance").getAt(0).data.id);
console.log(Ext.getStore("instance").getAt(0).data.issued_at);
You should see some result from your first data item.
If you get an id but just "undefined" for issued_at, you'll know that the issue is with the records. And in that case I would try to log your issued variable before you try to add it to the store to make sure that it is actually defined.
Please report with results for further help/discussions if needed.
It turns out that i was missing the config option on my model definition.
Ext.define('GS.model.login',{
extend: 'Ext.data.Model',
config:{
fields:[ 'id','issued_at','instance_url','signature','access_token','myBaseUri' ]
}
});