Im new to ui-bootstrap. actually im trying to use some components as tabs to make a menu for my app. My solution is unfortunately not working. Who can please help.
Here is my code.
angular.module('scolarite', ['ui.bootstrap', 'ui.bootstrap.demo', 'ngAnimate', 'ngTouch']);
angular.module('ui.bootstrap.demo', ['ui.bootstrap', 'ui.bootstrap.demo', 'ngAnimate', 'ngTouch']).controller('TabsDemoCtrl', function ($scope, $window) {
$scope.tabs = [
{title: 'Dynamic Title 1', content: 'Dynamic content 1'},
{title: 'Dynamic Title 2', content: 'Dynamic content 2', disabled: true}
];
$scope.alertMe = function () {
setTimeout(function () {
$window.alert('You\'ve selected the alert tab!');
});
};
$scope.model = {
name: 'Tabs'
};
});
<html ng-app="scolarite">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Accueil</title>
<link href="${pageContext.request.contextPath}/css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="${pageContext.request.contextPath}/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css"/>
<script src="${pageContext.request.contextPath}/js/angular-1.6.1.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/angular-animate.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/angular-animate.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/angular-touch.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/angular-touch.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/acc.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/ui-bootstrap-2.5.0.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/ui-bootstrap-2.5.0.tpls.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/ui-bootstrap-tpls-2.5.0.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/ui-bootstrap-2.5.0.min.js" type="text/javascript"></script>
</head>
<body ng-controller="TabsDemoCtrl">
<style type="text/css">
form.tab-form-demo .tab-pane {
margin: 20px 20px;
}
</style>
<uib-tabset type="pills">
<uib-tab heading="Inscription">Tab 1 content</uib-tab>
<uib-tab heading="Liste Etudiants" classes="btn-sm">Tab 2 content</uib-tab>
</uib-tabset>
</body>
</html>
Thanks in Advance
You can do this simply
$scope.groups = [
{
"Name" : "Alfreds Futterkiste",
"Country" : "Germany",
"open" : true
},
{
"Name" : "Berglunds snabbköp",
"Country" : "Sweden",
"open": false
},
{
"Name" : "Centro comercial Moctezuma",
"Country" : "Mexico",
"open" : false
},
{
"Name" : "Ernst Handel",
"Country" : "Austria",
"open" : false
}
]
in HTML
<uib-accordion close-others="true">
<div uib-accordion-group class="panel-default" heading="{{group.Name}}" ng-repeat="group in groups" is-open="group.open">
{{group.Country}}
</div>
</uib-accordion>
Have a look at this plunker
It looks as though you are getting your modules mixed up. You have set up two modules scolarite and ui.bootstrap.demo and then you have attached the TabsDemoCtrl controller to one of them - the ui.bootstrap.demo module, yet you are using the scolarite module in the app's ng-app directive.
To fix, you can change your ng-app directive so that your app uses your ui.bootstrap.demo module (the one with the controller), like this:
<html ng-app="ui.bootstrap.demo">`
Then you can remove the declaration of the scolarite module by removing this line:
angular.module('scolarite', ['ui.bootstrap', 'ui.bootstrap.demo', 'ngAnimate', 'ngTouch']);
Side note: You can do this the other way around, the key is to attach the controller to the module that you specify in your ng-app directive.
Try this solution its working fine
// Code goes here
angular.module('scolarite', ['ui.bootstrap.demo']);
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']).controller('TabsDemoCtrl', function ($scope, $window) {
$scope.tabs = [
{title: 'Dynamic Title 1', content: 'Dynamic content 1'},
{title: 'Dynamic Title 2', content: 'Dynamic content 2', disabled: true}
];
$scope.alertMe = function () {
setTimeout(function () {
$window.alert('You\'ve selected the alert tab!');
});
};
$scope.model = {
name: 'Tabs'
};
});
Related
when I set pinning and rowTemplate together,the rowTemplate repeat 3 times in single row
I think it is influenced by the pinning col,but i don't know how to fix it
here's the plunker: http://plnkr.co/edit/XoXMbmqa1IjegT1RQ297?p=preview
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pinning']);
app.controller('MainCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
$scope.gridOptions = {};
$scope.gridOptions.columnDefs = [
{ name:'id', width:50, enablePinning:true, hidePinLeft: false, hidePinRight: true },
{ name:'name', width:100, pinnedLeft:true },
{ name:'age', width:100, pinnedRight:true },
{ name:'address.street', width:150 },
{ name:'address.city', width:150 },
{ name:'address.state', width:50 },
{ name:'address.zip', width:50 }
];
$scope.gridOptions.rowTemplate='<div>helloworld</div>'
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.then(function(response) {
$scope.gridOptions.data = response.data;
});
}]);
.grid {
width: 100%;
height: 400px;
}
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-animate.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-aria.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/lodash.min.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/jszip.min.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/excel-builder.dist.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" class="grid" ui-grid-pinning></div>
</div>
<script src="app.js"></script>
</body>
</html>
I'm trying to make a table with multi headers to show date info,and each row has a name as the first column ,the second column is a line chart which can show business data.
I draw a pic to show this
Assuming you can do without pinning, I would remove the pinning extension from your grid. This makes working with header templates easier... You would otherwise run into the same issue with your header (three repeated headers).
See this plunker: http://plnkr.co/edit/nvuUKIQczdY2E6KuMEVG?p=preview
I removed pinning, removed rowTemplate, used a single headerCellTemplate (placeholder) to accomodate your calender header, and used a cellTemplate to accomodate you graph logic.
Html:
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" class="grid"></div>
</div>
Javascript:
var app = angular.module('app', ['ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
$scope.gridOptions = {};
$scope.gridOptions.columnDefs = [
{ field:'id', name:'id', width:'25'},
{ field:'name', name:'name', width:'*' },
{ name:'chart', headerCellTemplate:'<div>Include header code here', width:'*', cellTemplate: '<div>include graph code here</div>' }
];
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.then(function(response) {
$scope.gridOptions.data = response.data;
});
}]);
Hope I interpreted your goal correctly and I hope this helps :)
I need to bind an event in my controller to be called when there is a change in value of a dropdown. This dropdown is a multi-select dropdown -which is in a directive.
I have been able to customize the dropdown using the settings available - however, unable to bind the event.
Here is the code
HTML:
<html>
<head>
<meta charset="utf-8">
<title>AngularJS Dropdown Multiselect</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<script src="./angular.min.js"></script>
<!--<script src="./ui-bootstrap-tpls.js"></script>-->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.7.0/lodash.min.js"></script>
<script src="./app.js"></script>
<style>
.noscroll {
overflow: hidden;
}
</style>
</head>
<body>
<div ng-app="myApp" ng-controller="AppCtrl">
<div ng-dropdown-multiselect="" options="fruitdata"
selected-model="fruitmodel" checkboxes="true"
extra-settings="fruitsettings" events="extraEvents">
</div>
Selected Model: {{fruitmodel}} | json
</div>
</body>
</html>
JS:
'use strict';
var app = angular.module('myApp', ['angularjs-dropdown-multiselect']);
app.controller('AppCtrl', function ($scope) {
$scope.fruitmodel = [];
$scope.fruitsettings = {
enableSearch: false
};
$scope.fruitdata = [{
"label": "Apple",
"id": 1
}, {
"label": "Banana",
"id": 2
}, {
"label": "Orange",
"id": 3
}, {
"label": "Pineapple",
"id": 4
}, {
"label": "Strawberry",
"id": 5
}];
$scope.example2settings = {
displayProp: 'id'
};
$scope.extraEvents = {
onItemDeselect: '$scope.onChange'
};
$scope.onChange = function() {
console.log($scope.fruitdata);
};
});
I need to detect the change to the model and take action based on this. I tried two approaches - adding ng-change to the dropdown as below - however, this does not work.
<div ng-dropdown-multiselect="" options="fruitdata"
selected-model="fruitmodel" checkboxes="true"
extra-settings="fruitsettings" ng-change="onChange()">
</div>
The directive does seem to allow extending the event handling - however, I guess I am not getting it right.
Snapshot from AngularJS Dropdown Multiselect
Seems like you have to use:
<div ng-dropdown-multiselect="" ... events="eventsCallback"></div>
and into your controller:
$scope.eventsCallback = {
onItemSelect: function () { ... },
onSelectionChanged: function () { ... }
}
Is $scope.fruitmodel where you are storing the selected items? You can use $scope.$watchCollection to act on changes.
$scope.$watchCollection('fruitmodel', function(newValue, oldValue) {
console.log(newValue, oldValue);
});
I'm trying to sort a grid on a column where the values are in dollars (with $ and , included) but the sorting doesn't work correctly on that - is there a way to get the sorting to work on this, or if necessary, set the values to numbers and then display as money?
i have:
$scope.data = [
{ 'value': '$1,000,000' },
{ 'value': '$100,000' },
....
{ 'value': '$1,000' }
];
$scope.gridOptions = {
enableSorting: true,
data: $scope.data,
columnDefs: [
...
{ name: 'Value', field: 'value', width: 110 }
]
I dont see your exact Html and other JS code , So I tried myself Click on a column header to sort by that column. If you missed anything in your code please include it.I posted my working example.,
Html code ,
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<br>
<br>
<div id="grid1" ui-grid="gridOptions1" class="grid"></div>
<br>
</div>
<script src="app.js"></script>
</body>
</html>
JS Code
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
$scope.data = [
{ 'value': '$1,000,000' },
{ 'value': '$100,000' },
{ 'value': '$1,000' }
];
$scope.gridOptions1 = {
enableSorting: true,
columnDefs: [
{ field: 'value',
name:'value'},
],
};
$scope.gridOptions1.data = $scope.data;
}]);
This is my first time trying to use a Kendo control, and my BA is requiring it for my current project (I have been using Angular-ui-grid). I can't get the Kendo grid to show at all with test data and I am clueless as to what I am missing. The Console in Chrome says "Kendo requires JQuery to be loaded before Angular. However, the JQuery bundle is set to load first. I even put jquery-1.8.2.js before the angular.js script tag, but it still says the same thing I have the following script tags in my _Layout.cshtml page:
#Styles.Render("~/CSS/bootstrap")
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/app/app.js"></script>
<script src="~/Scripts/ui-bootstrap-tpls-0.14.3.js"></script>
<script src="~/Scripts/dirPagination.js"></script>
<script src="~/Scripts/app/checklist-model.js"></script>
<script src="~/Scripts/angular-sanitize.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/Scripts/angular-touch.js"></script>
<script src="~/Scripts/angular-animate.js"></script>
<script src="~/Scripts/pdfmake/pdfmake.min.js"></script>
<script src="~/Scripts/pdfmake/vfs_fonts.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<link href="~/Content/ui-grid.css" rel="stylesheet" />
<script src="~/Scripts/ui-grid.js"></script>
<script src="~/Scripts/draggable-rows.js"></script>
<script src="~/Scripts/app/Home/OperatorHomeCtrl.js"></script>
<script src="~/Scripts/app/Home/operatorHomeService.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--This bundle was moved by the Telerik VS Extensions for compatibility reasons-->
<script src="#Url.Content("~/Scripts/kendo/2015.1.429/jquery.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2015.1.429/jszip.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2015.1.429/kendo.all.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2015.1.429/kendo.aspnetmvc.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
<script src="~/Scripts/angular-kendo.js"></script>
Here is my module:
var app = angular.module('myModule', ['ui.bootstrap', 'checklist-model', 'kendo.directives','ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.pagination', 'ui.grid.selection', 'ui.grid.exporter', 'ui.grid.autoResize', 'ui.grid.draggable-rows'])
Here is my Controller:
angular.module('myModule').controller("TestCtrl", function ($compile, $scope, $log) {
$scope.gridOptions = {
pageable: false,
batch: false,
reorderable: true,
sortable: true,
editable: "inline",
dataSource: new kendo.data.DataSource({
data: [
{ id: 1, name: "x" },
{ id: 2, name: "y" }
],
schema: {
model: {
id: "id",
fields: {
'Name': { type: "string", editable: true },
}
}
}
}),
columns: [
{ field: "name" },
{ template: '<button class=\'k-button\' ng-click=\'test("custom1")\'><i class="icon-edit"></i>custom1</button>' },
{
command: [
{ name: "edit", text: " " },
{ name: "destroy", text: " " },
{ template: '<button class=\'k-button\' ng-click=\'test("custom2")\'><i class="icon-edit"></i>custom2</button>' }
]
}
]
};
$scope.test = function (m) {
alert(m)
};
});
Here is my HTML:
<script src="~/Scripts/app/Test/TestCtrl.js"></script>
<div ng-app="myModule" ng-controller="TestCtrl">
<kendo-grid k-options="gridOptions">
</kendo-grid>
</div>
Can someone please tell me what I am missing here?
Any assistance is greatly appreciated!
Got the grid to show up, although the headers don't line up correctly with the body. It did not like the Script tag written as:
<script src="~/Scripts/angular-kendo.js"></script>
I had to change it to:
<script src="#Url.Content("~/Scripts/angular-kendo.js")"></script>
Something's causing the header cells to not line-up correctly, but at least the grid is showing. Thanks all for trying to help!
I am using angularjs ui-grid and it's working well on desktop as well as on mobile also but when I try to move ui-grid columns on mobile or touchable devices then they are not being moved.
Here is my plunkr:
Any help would be appreciated.
Below is code attached also.
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<div id="grid1" ui-grid="gridOptions" ui-grid-move-columns class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>
And js file code is:-
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.moveColumns']);
app.controller('MainCtrl', ['$scope', function($scope) {
$scope.gridOptions = {
enableSorting: true,
columnDefs: [{
name: 'firstName',
field: 'first-name'
}, {
name: '1stFriend',
field: 'friends[0]'
}, {
name: 'city',
field: 'address.city'
}, {
name: 'getZip',
field: 'getZip()',
enableCellEdit: false
}],
data: [{
"first-name": "Cox",
"friends": ["friend0"],
"address": {
street: "301 Dove Ave",
city: "Laurel",
zip: "39565"
},
"getZip": function() {
return this.address.zip;
}
}]
};
}]);