With bootstrap-vue: 2.1 I implemented tables with big number of columns andwant to make scrolling of
columns, but failed with page like :
<template>
<b-card >
<b-card-body class="">
<b-card-title class="mb-2">
<h4>You can control users in system</h4>
</b-card-title>
<div>
<b-table
responsive="true"
stacked="false"
:items="users"
:fields="usersFields"
:per-page="0"
:current-page="current_page"
>
<template v-slot:cell(id)="data">
<div class="text-right">{{ data.value }}</div>
</template>
<template v-slot:cell(name)="data">
<div class="text-left admin_table_cell">{{ data.value }}</div>
</template>
<template v-slot:cell(status)="data">
<div class="text-left admin_table_cell">{{ getDictionaryLabel( data.value, userStatusLabels ) }}</div>
</template>
<template v-slot:cell(permission_text)="data">
<div class="text-left admin_table_cell">{{ data.value }}</div>
</template>
<template v-slot:cell(email)="data">
<div class="text-left admin_table_cell">{{ data.value }}</div>
</template>
<template v-slot:cell(actions)="data">
<div class="text-center admin_table_cell">
<router-link :to="{name: 'adminUserEditor', params: {id: data.item.id}}" :class="'p-1 a_edit_item_'+data.item.id">
<i :class="'i_link '+getHeaderIcon('edit')" title="Edit user"></i>
</router-link>
<a v-on:click="removeUser(data.item.id, data.item.name, index)" :class="'p-1 a_delete_item_'+data.id">
<i :class="'fa fa-trash'"></i>
</a>
</div>
</template>
</b-table>
</div>
<b-pagination
v-model="current_page"
:total-rows="users_total_count"
:per-page="per_page"
aria-controls="my-table"
></b-pagination>
</b-card-body>
</b-card>
</template>
<script>
import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource)
import appMixin from '#/appMixin';
import {settingCredentialsConfig, settingsJsMomentDatetimeFormat, settingsUserStatusLabels} from '#/app.settings.js'
export default {
data() {
return {
users: [],
users_total_count: 0,
usersFields: [
'id',
{key: 'name', sortable: false},
{key: 'email', sortable: false},
{key: 'status', sortable: false},
{key: 'first_name', sortable: false},
{key: 'last_name', sortable: false},
{key: 'phone', sortable: false},
{key: 'website', sortable: false},
{key: 'permission_text', label: 'Permissions'},
'actions',
],
current_page: 1,
per_page: 2,
filter_name: '',
order_by: 'created_at',
order_direction: 'desc',
}
},
name: 'usersAdminListingPage',
mixins: [appMixin],
mounted() {
this.loadUsers()
}, // mounted() {
...
}
</script>
Setting property
responsive="true"
I expected hor scrolling automatically, but failed and I have all page design broken
and shifting at all left-right.
Which is valid way to make hor scrolling automatically ?
the props responsive and stacked are Boolean props (note they can also accept a string breakpoint names), and you are passing string "true" values to them (e.g. the string 'true').
So you should be doing:
<b-table :responsive="true" :stacked="false" ... >
<!-- ... --->
</b-table>
Or simply just the following:
<b-table responsive ... >
<!-- ... --->
</b-table>
Note stacked defaults to false if not specified.
Related
I have an object with an array:
{
People: [
{
label: 'label1',
type: 'type1'
},
{
label: 'label2',
type: 'type2'
}],
Places: [
{
label: 'label1',
type: 'type1'
},
{
label: 'label2',
type: 'type2'
}]
}
I have an ng-repeat to create a list. I can bind to the properties inside People and Places but cannot bind to the name 'People' and 'Places'.
My html is something like this:
<div ng-repeat="category in vm.categories">
<button>{{category}}</button>
<ul>
<li ng-repeat="subcategory in category">
{{subcategory.label}}
</li>
</ul>
</button>
</div>
so subcategories are all fine but {{category}} doesn't return People/Places. How do I bind to the name of the array in the object?
Try this by using iterate over the keys and values with ng-repeat in AngularJS?
angular.module("test",[]).controller("testc",function($scope) {
$scope.categories = {
People: [
{
label: 'label1',
type: 'type1'
},
{
label: 'label2',
type: 'type2'
}],
Places: [
{
label: 'label1',
type: 'type1'
},
{
label: 'label2',
type: 'type2'
}]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="testc">
<div ng-repeat="(key, value) in categories">
<button>{{key}}</button>
<ul>
<li ng-repeat="subcategory in value">
{{subcategory.label}}
</li>
</ul>
</button>
</div>
</div>
Pardon me if the question sounds weird. Suppose I have the following object:
// For example purposes, pretend that link gets pushed to $scope.links 5 times.
var link = {
name: "name",
description: "description",
members: [{
memname: "member name"
}],
active: true
}
$scope.links.push(link);
...and I used $scope.links as follows
<li ng-repeat="item in links">
<li ng-repeat = "member in item.members">
...
</li>
</li>
...and inside the list with member in item.members, I want to use link.active for ng-show. Is it possible to do so?
Something like:
<li ng-repeat="member in item.members" ng-show="item.active">.
Please advise.
Thank you.
Created Snippet for you .
function myCtrl($scope) {
$scope.links = [{
'name': "name",
'description': "description",
'members': [{
'memname': "member name"
},{
'memname': "member name 2"
}],
'active': true
},{
'name': "name 2",
'description': "description",
'members': [{
'memname': "member name"
},{
'memname': "member name 2"
}],
'active': false
}]
//$scope.links.push(link);
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app ng-controller="myCtrl">
<ul>
<li ng-repeat="item in links" ng-show="item.active == true">
{{item.name}}
<ul >
<li ng-repeat = "member in item.members" >
{{member.memname}}
</li>
</ul>
</li>
</ul>
</div>
Hope this will help you.
I need filter for ng-repeat, which will hide elements.
If $scope.selected will get true, i need to hide elements when select: true or visible: false
$scope.selected = false;
$scope.array = [
{name: 'item1', select: true, visible: false},
{name: 'item2', select: true, visible: true},
{name: 'item3', select: false, visible: true},
{name: 'item4', select: true, visible: false},
{name: 'item5', select: false, visible: true},
]
<div ng-repeat="item in array">
<div>{{item.name}}</div>
</div>
In this case you need use filter.
Live example in jsfiddle.
var myApp = angular.module("myApp", []);
myApp.controller("myCtrl", function($scope) {
$scope.selected = true;
$scope.myFilter = function(item){
return $scope.selected && (!item.visible || item.select)
}
$scope.array = [
{name: 'item1', select: true, visible: false},
{name: 'item2', select: true, visible: true},
{name: 'item3', select: false, visible: true},
{name: 'item4', select: true, visible: false},
{name: 'item5', select: false, visible: true},
]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="item in array|filter:myFilter">
<div>{{item.name}}</div>
</div>
</body>
Try this
<div ng-repeat="item in arrray">
<div ng-show="selected">
<div ng-hide="item.visible==false && item.select==true">{{item.name}}</div>
</div>
</div>
use ng-if:
<div ng-if="item.visible && selected && item.select == true">{{item.name}}</div>
I would recommend this one:
<div ng-repeat="item in array">
<div ng-hide="selected && (!item.visible || item.select)">{{item.name}}</div>
</div>
I'm trying to do a tree menu on my site.
I want the subitems to show/hide when I click the parent.
This solution don't work. Even tho it changes the item.active value to false/true. Any ides my friends?
Here is my HTML:
<div id="sidebar-wrapper">
<div class="cssTreeMenu tree">
<ul class="sidebar-nav">
<li ng-repeat="item in items" >
<a ui-sref="{{item.sref}}" ui-sref-active="active" ng-click="testcolaps($index)">{{item.name}}</a>
<ul ng-show="{{item.active}}" class="navbarColorOnClick">
<li ng-repeat="subItem in item.subItems" ui-sref-active="active">
<a ui-sref="{{subItem.sref}}">{{subItem.name}}</a>
</li>
</ul>
</li>
</ul>
</div>
Here is my controller:
$scope.testcolaps = function (index) {
$scope.items[index].active = !$scope.items[index].active;
};
$scope.items = [
{
name: "Test",
sref: "kpi.test",
active: false,
subItems: [
{
name: "Selectable KPI menu",
sref: "kpi.selectableKpiMenu"
},
{
name: "Test",
sref: "kpi.test"
}
]
},
{
name: "Test2",
sref: "kpi.test",
active: false,
subItems: [
{
name: "Selectable KPI menu 2",
sref: "kpi"
},
{
name: "Test 2",
sref: "internal"
}
]
},
];
As you can se my items have a active: property who I change to true/false. But still nothing happens in my menu. If I hard-code it to true it is showing like it should but still the click-event doesn't work.
The expression inside the ng-show need an expression without {{}} interpolation. Basically you need to remove {{}}.
ng-show="item.active"
My code is as follows (the fiddle):
<div ng-controller="myCtrl">
<div ng-model="currentTab" ng-init="currentTab='Tab1'"/>
<div ng-init="popovers = [
{ name: 'Popover1',
displayName: 'Pop over with two tabs',
tabs: [
{ name: 'Tab1',
displayName: 'First tab',
description: ['First tab description']
},
{ name: 'Tab2',
displayName: 'Second tab',
description: ['Second tab description']
}
]
}
]"/>
<b>Tabs in popover</b>
<div
class="popover"
ng-repeat="p in popovers"
>
Popover name: {{p.displayName}}
<div ng-repeat="t in p.tabs"
class="tab"
ng-class="currentTab==t.name?'selected':''"
ng-click="currentTab=t.name"
>
{{t.name}}
</div>
<div ng-repeat="t in p.tabs"
class="tabContent"
ng-class="currentTab==t.name?'selected':''"
>
<p>{{t.displayName}}</p>
</div>
</div>
</div>
There is something I don't get which make the code not working perfectly, as the selected class name is never removed as one click on the tab.
When you want to modify a variable of your parent scope from within a ng-repeat you need to use $parent.currentTab.
Updated Fiddle