I have a single page app with vertical tables to the left. I'm able to to click on each tab and the expected content is showing. The problem I'm having is I'm not able to programmatically change the ng-checked to "true" for the selected tab and "false" for the unselected tab. Because of this the selected tab is always on the first tab in the list of tabs. I've provided all the codes (6 files) to run this app so you can see what im talking about
Index.html
<html ng-app= "mainApp">
<head>
<title>OneilAndK</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/uxcore.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="routing.js"></script>
<link rel="stylesheet" href="verticalTab.css" rel="stylesheet"/>
</head>
<body>
<div class="tabordion">
<section id="section1">
<input type="radio" name="sections" id="option1" ng-checked = true >
<label ui-sref="About" for="option1">About</label>
<article>
<div ui-view></div>
</article>
</section>
<section id="section2">
<input type="radio" name="sections" id="option2" ng-checked = false >
<label ui-sref="Knowledge" for="option2" >Knowledge</label>
<article>
<div ui-view></div>
</article>
</section>
<section id="section3">
<input type="radio" name="sections" id="option3" ng-checked = false >
<label ui-sref="Contact" for="option3" >Contact</label>
<article>
<div ui-view></div>
</article>
</section>
</div>
</body>
</html>
About.html
<p >This is my about page</p>
Contact.html
<p >This is my Contact page</p>
Knowledge.html
<p >This is my knowledge page</p>
routing.js
var app = angular.module('mainApp', ['ui.router']);
app.config(['$stateProvider','$urlRouterProvider', function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise("Home.html")
$stateProvider
.state('Contact', {url:"/Contact",templateUrl:"Contact.html"})
.state('Knowledge', {url:"/Knowledge",templateUrl:"Knowledge.html"})
.state('About', {url:"/About",templateUrl:"About.html"})
}]);
verticalTab.css
h1 {
color: #333;
font-family: arial, sans-serif;
margin: 1em auto;
width: 80%;
}
.tabordion {
color: #333;
display: block;
font-family: arial, sans-serif;
margin: auto;
position: relative;
width: 80%;
}
.tabordion input[name="sections"] {
left: -9999px;
position: absolute;
top: -9999px;
}
.tabordion section {
display: block;
}
.tabordion section label {
background: #ccc;
border:1px solid #fff;
cursor: pointer;
display: block;
font-size: 1.2em;
font-weight: bold;
padding: 15px 20px;
position: relative;
width: 180px;
z-index:100;
}
.tabordion section article {
display: none;
left: 230px;
min-width: 300px;
padding: 0 0 0 21px;
position: absolute;
top: 0;
}
.tabordion section article:after {
background-color: #ccc;
bottom: 0;
content: "";
display: block;
left:-229px;
position: absolute;
top: 0;
width: 220px;
z-index:1;
}
.tabordion input[name="sections"]:checked + label {
background: #eee;
color: #bbb;
}
.tabordion input[name="sections"]:checked ~ article {
display: block;
}
#media (max-width: 533px) {
h1 {
width: 100%;
}
.tabordion {
width: 100%;
}
.tabordion section label {
font-size: 1em;
width: 160px;
}
.tabordion section article {
left: 200px;
min-width: 270px;
}
.tabordion section article:after {
background-color: #ccc;
bottom: 0;
content: "";
display: block;
left:-199px;
position: absolute;
top: 0;
width: 200px;
}
}
#media (max-width: 768px) {
h1 {
width: 96%;
}
.tabordion {
width: 96%;
}
}
#media (min-width: 1366px) {
h1 {
width: 70%;
}
.tabordion {
width: 70%;
}
}
I would use angular-ui-bootstrap to create tab panels. And for dynamically generating the tab headings you can use stateHelper module.
With stateHelper you can create a configuration object that you can also use inside a ng-repeat to generate the navbar of the tab panel.
The only tricky thing to make it work is the $stateChangeStart listener to calculate the index for the active route. Once the index is found it will be passed to ui-bootstrap via $rootScope.active variable.
Please have a look at the demo below or this jsfiddle.
angular.module('demoApp', ['ui.router', 'ui.bootstrap', 'ui.router.stateHelper'])
.run(['$state', '$rootScope', 'TABS_CONFIG', function($state, $rootScope, TABS_CONFIG) {
// run needed to set the correct tab-index on load
var tabs = TABS_CONFIG.children;
$rootScope.$on('$stateChangeStart', function(e, toState, toParams, fromState, fromParams) {
angular.forEach(tabs, function(item, index) {
if (item.name == toState.name) {
$rootScope.active = index;
}
});
});
}])
.constant('TABS_CONFIG', {
name: 'tabs',
templateUrl: 'tabs.html',
abstract: true,
children: [{
url: '/about',
name: 'about',
template: '<div class="container"><h1>about</h1></div>'
//templateUrl: 'about.html'
}, {
url: '/contact',
name: 'contact',
template: '<div class="container"><h1>contact</h1></div>'
//templateUrl: 'contact.html'
}, {
url: '/knowhow',
name: 'know-how',
template: '<div class="container"><h1>knowhow</h1></div>'
//templateUrl: 'knowhow.html'
},
]
})
.controller('mainController', function($scope, $state, TABS_CONFIG) {
$scope.tabs = TABS_CONFIG.children;
$scope.go = function(tab) {
//$scope.active = $scope.tabs.indexOf(tab);
$state.go(tab.name);
};
})
.config(routes);
function routes($urlRouterProvider, stateHelperProvider, TABS_CONFIG) {
$urlRouterProvider.otherwise('/contact');
stateHelperProvider.state(TABS_CONFIG, {
keepOriginalNames: true
});
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdn.rawgit.com/marklagendijk/ui-router.stateHelper/master/statehelper.js"></script>
<div ng-app="demoApp" ng-controller="mainController">
<div ui-view></div>
<script type="text/ng-template" id="tabs.html">
<uib-tabset active="active">
<uib-tab index="$index" ng-repeat="tab in tabs" ng-click="go(tab)">
<uib-tab-heading>{{tab.name}}</uib-tab-heading>
<div ui-view></div>
</uib-tab>
</uib-tabset>
</script>
</div>
Related
I am working on an application where I have to set item class to active but Its not working. It's not in the ng-repeat list. Its 4 normal button that has to be active when clicked on it.
Try achieving this by ng-class as shown below.
Controller
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function ($scope) {
$scope.isActive = false;
$scope.activeButton = function() {
$scope.isActive = !$scope.isActive;
}
});
CSS
$base: #F8E1C2;
$button: #3D3240;
$button-active: #FF735C;
$margin: 40px;
body {
background: $base;
-webkit-font-smoothing: antialiased;
padding: $margin;
text-align: center;
}
.button {
border: none;
padding: 14px;
color: #fff;
margin: 0 10px;
background: $button;
font-weight: 700;
border-radius: 4px;
}
.active {
background: $button-active;
}
.disabled {
background: #eee;
color: #aaa;
}
HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button class="button" ng-class="{'active': isActive}" ng-click="activeButton()" type="button">Click Me</button>
</div>
</body>
</html>
remove single quotes on class name active, like from 'active' to active
I am trying to use meter tag to show battery power indicator. It works with hard coded value but does not work with $scope variable.Here is the jsfiddle
HTML
<div ng-app="app" ng-controller="main">
<div id="page-wrapper">
<p>
<meter min="0" max="4" low="1" high="3" optimum="4" value="2"></meter>
</p>
<p>
<meter min="0" max="4" low="1" high="3" optimum="4" value="value"></meter>
</p>
</div>
</div>
**JS*
angular.module("app", [])
.controller("main", ['$scope', function($scope) {
$scope.value = 2
}])
You have to use {{value}} to reflect the scope value.
So use,
value="{{value}}"
instead of
in value="value"
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<style>
.styled meter {
/* Reset the default appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: 30px;
/* For Firefox */
background: #EEE;
box-shadow: 0 2px 3px rgba(0,0,0,0.2) inset;
border-radius: 3px;
}
/* WebKit */
.styled meter::-webkit-meter-bar {
background: #EEE;
box-shadow: 0 2px 3px rgba(0,0,0,0.2) inset;
border-radius: 3px;
}
.styled meter::-webkit-meter-optimum-value,
.styled meter::-webkit-meter-suboptimum-value,
.styled meter::-webkit-meter-even-less-good-value {
border-radius: 3px;
}
.styled meter::-webkit-meter-optimum-value {
background: #86CC00;
}
.styled meter::-webkit-meter-suboptimum-value {
background: #FFDB1A;
}
.styled meter::-webkit-meter-even-less-good-value {
background: #CC4600;
}
/* Firefox */
.styled meter::-moz-meter-bar {
border-radius: 3px;
}
.styled meter:-moz-meter-optimum::-moz-meter-bar {
background: #86CC00;
}
.styled meter:-moz-meter-sub-optimum::-moz-meter-bar {
background: #FFDB1A;
}
.styled meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
background: #CC4600;
}
button {
display: inline-block;
border-radius: 3px;
border: none;
font-size: 0.9rem;
padding: 0.4rem 0.8em;
background: #69c773;
border-bottom: 1px solid #498b50;
color: white;
-webkit-font-smoothing: antialiased;
font-weight: bold;
margin: 0 0.25rem;
text-align: center;
}
button:hover, button:focus {
opacity: 0.75;
cursor: pointer;
}
button:active {
opacity: 1;
box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1) inset;
}
</style>
<div ng-app="myApp" ng-controller="myCtrl">
<div id="page-wrapper">
<p>
<meter min="0" max="4" low="1" high="3" optimum="4" value="4"></meter>
</p>
<p>
<meter min="0" max="4" low="1" high="3" optimum="4" value="{{value}}"></meter>
</p>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.value = 2
});
</script>
</body>
</html>
PLEASE RUN THE ABOVE SNIPPET
Here is a working DEMO
Some observations as per your fiddle :
You forgot to include AngularJS library in your fiddle.
To get the $scope value into the HTML . Use angular expression {{value}}
Change LOAD TYPE to No wrap - in <head> from onLoad in JAVASCRIPT section of the fiddle.
DEMO
I'm trying to make a video player application using OnSen UI (https://onsen.io) and Videogular (http://www.videogular.com/). When i used together the video controllers of videogular is not working. Following are my code.
<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css">
<link rel="stylesheet" href="list_with_header.css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-sanitize.min.js"></script>
<script src="http://static.videogular.com/scripts/videogular/latest/videogular.js"></script>
<script src="http://static.videogular.com/scripts/controls/latest/vg-controls.js"></script>
<script src="http://static.videogular.com/scripts/overlay-play/latest/vg-overlay-play.js"></script>
<script src="http://static.videogular.com/scripts/poster/latest/vg-poster.js"></script>
<script src="http://static.videogular.com/scripts/buffering/latest/vg-buffering.js"></script>
<script>
ons.bootstrap();
</script>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
.playlist ul {
list-style-type: none;
}
.playlist ul a {
cursor: pointer;
color: #428bca;
text-decoration: none;
}
.playlist ul a:visited {
color: #428bca;
}
.playlist ul a:hover {
color: #428bca;
text-decoration: underline;
}
.videogular-container {
width: 100%;
height: 320px;
margin: auto;
overflow: hidden;
}
.videogular-container .skipButton {
position: absolute;
padding: 10px;
top: 10px;
right: 10px;
z-index: 99999;
color: white;
cursor: pointer;
background-color: #666666;
border: 2px #FFFFFF solid;
display: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
#media (min-width: 1200px) {
.videogular-container {
width: 1170px;
height: 658.125px;
}
.videogular-container.audio {
width: 1170px;
height: 50px;
}
}
#media (min-width: 992px) and (max-width: 1199px) {
.videogular-container {
width: 940px;
height: 528.75px;
}
.videogular-container.audio {
width: 940px;
height: 50px;
}
}
#media (min-width: 768px) and (max-width: 991px) {
.videogular-container {
width: 728px;
height: 409.5px;
}
.videogular-container.audio {
width: 728px;
height: 50px;
}
}
</style>
<script>
'use strict';
angular.module('DemoAppVideo',
[
"ngSanitize",
"com.2fdevs.videogular",
"com.2fdevs.videogular.plugins.controls",
"com.2fdevs.videogular.plugins.overlayplay",
"com.2fdevs.videogular.plugins.poster",
"com.2fdevs.videogular.plugins.buffering"
]
)
.controller('HomeCtrl',
["$sce", "$timeout", function ($sce, $timeout) {
var controller = this;
controller.state = null;
controller.API = null;
controller.currentVideo = 0;
controller.onPlayerReady = function(API) {
controller.API = API;
};
controller.onCompleteVideo = function() {
controller.isCompleted = true;
controller.currentVideo++;
if (controller.currentVideo >= controller.videos.length) controller.currentVideo = 0;
controller.setVideo(controller.currentVideo);
};
controller.videos = [
{
sources: [
{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.mp4"), type: "video/mp4"},
{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.webm"), type: "video/webm"},
{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.ogg"), type: "video/ogg"}
]
},
{
sources: [
{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/big_buck_bunny_720p_h264.mov"), type: "video/mp4"},
{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/big_buck_bunny_720p_stereo.ogg"), type: "video/ogg"}
]
}
];
controller.config = {
preload: "none",
autoHide: false,
autoHideTime: 3000,
autoPlay: false,
sources: controller.videos[0].sources,
theme: {
url: "http://www.videogular.com/styles/themes/default/latest/videogular.css"
},
plugins: {
poster: "http://www.videogular.com/assets/images/videogular.png"
}
};
controller.setVideo = function(index) {
controller.API.stop();
controller.currentVideo = index;
controller.config.sources = controller.videos[index].sources;
$timeout(controller.API.play.bind(controller.API), 100);
};
}]
);
</script>
<ons-tabbar>
<ons-tab page="home.html" label="Home" icon="ion-home" active="true"></ons-tab>
<ons-tab page="comments.html" label="Comments" icon="ion-chatbox-working"></ons-tab>
<ons-tab page="tags.html" label="Tags" icon="ion-ios-pricetag"></ons-tab>
<ons-tab page="settings.html" label="Settings" icon="ion-ios-cog"></ons-tab>
</ons-tabbar>
<ons-template id="home.html">
<ons-page>
<ons-toolbar>
<div class="left" style="line-height: 44px">
<ons-back-button>Back</ons-back-button>
</div>
<div class="center">Artists</div>
<div class="right" style="line-height: 44px"> Right </div>
</ons-toolbar>
<div ng-app="DemoAppVideo">
<div ng-controller="HomeCtrl as controller">
<div class="videogular-container">
<videogular vg-player-ready="controller.onPlayerReady($API)" vg-complete="controller.onCompleteVideo()" vg-theme="controller.config.theme.url">
<vg-media vg-src="controller.config.sources"
vg-tracks="controller.config.tracks"> </vg-media>
<vg-controls>
<vg-play-pause-button></vg-play-pause-button>
<vg-time-display>{{ currentTime | date:'mm:ss':'+0000' }}</vg-time-display>
<vg-scrub-bar>
<vg-scrub-bar-current-time></vg-scrub-bar-current-time>
</vg-scrub-bar>
<vg-time-display>{{ timeLeft | date:'mm:ss':'+0000' }}</vg-time-display>
<vg-volume>
<vg-mute-button></vg-mute-button>
<vg-volume-bar></vg-volume-bar>
</vg-volume>
<vg-fullscreen-button></vg-fullscreen-button>
</vg-controls>
<vg-overlay-play></vg-overlay-play>
<vg-buffering></vg-buffering>
<vg-poster vg-url='controller.config.plugins.poster'></vg-poster>
</videogular>
</div>
<div class="playlist">
<ul>
<li><a ng-click="controller.setVideo(0)">Pale Blue Dot</a></li>
<li><a ng-click="controller.setVideo(1)">Big Buck Bunny</a></li>
</ul>
</div>
</div>
</div>
</ons-page>
</ons-template>
Error Code I received.
"Error: [ng:areq] Argument 'HomeCtrl' is not a function, got undefined
You are loading AngularJS twice with ons.bootstrap and then with angular.module('DemoAppVideo', []), so it's probably not taking the second part. Read about ons.bootstrap function here.
Basically, you can do it the Angular way (remember to add 'onsen'):
<script>
// Assume 'ng-app' is defined as 'my-app'
var module = angular.module('my-app', ['onsen', 'ngAnimate']);
module.controller('AppController', function($scope) { });
</script>
Or you can use ons.bootstrap instead:
<script>
// No need to define 'ng-app'
var module = ons.bootstrap(['ngAnimate']);
module.controller("AppController", function($scope){ });
</script>
Its Fixed by initializing onsen in Angular way,
var module = ons.bootstrap('myApp',
[
"ngSanitize",
"com.2fdevs.videogular",
"com.2fdevs.videogular.plugins.controls",
]);
I have some dummy data in a mainMenu.json which will server to populate a list which will be the first template loaded by angular framework when app starts.
chrome console reporting no errors.
But I get a white "blank" page "right image" and not sure where I went wrong. Thanks
//mainMenu.json
[{
"name": "item1",
"image": "item1_"
}, {
"name": "item2",
"image": "item2_"
}, {
"name": "item3",
"image": "item3_"
}]
//--------------------------------------------------------------------
//app.js
var myApp = angular.module('myApp', [
'ngRoute', //turn on deep linking
'appControllers' //js to handle the route
]);
//Configure how the partials are going to run
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/list', {
templateUrl: 'partials/mainMenu.html',
controller: 'MainMenuCtrl'
}).otherwise({ //home page
redirectTo: '/list'
});
}]);
//--------------------------------------------------------------------
// controlers.js
var appControllers = angular.module ('appControllers', []);
appControllers.controller ('MainMenuCtrl', ['$scope', '$http', function ($scope, $http){
$http.get('js/mainMenu.json').success (function (data){
$scope.menuItems = data;
});
}]);
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
main {
margin-top: 40px;
margin-bottom: 40px;
padding: 0.5em;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
}
footer > button {
font-size: 1em;
padding: 0.5em 1em;
}
input {
font-size: 1em;
width: 100%;
}
header, footer {
background-color: white;
}
footer > button {
padding: 0.5em 1em;
width: 31.33%;
margin: 0 1%;
float: left;
box-sizing: border-box;
}
<!--index.html-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<header>
<button class="menuLeft" type="button" >☰</button>
<label class="pageTitle">Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
<main ng-view></main>
<footer>
<button class="menuLeft" type="button" >NO</button>
<button class="menuLeft" type="button" >EXTRA</button>
<button class="menuRight" type="button">YES</button>
</footer>
</body>
</html>
//--------------------------------------------------------------------
<!--mainMenu.html-->
<section>
<ul>
<li ng-repeat="item in menuItems">
<br/>
<p>dummy</p>
<h2>{{item.name}}</h2>
</li>
</ul>
</section>
You have an error in your code
var appControllers = angularModule ('appControllers', []);
It should be
var appControllers = angular.module ('appControllers', []);
To catch an error on $http.get promise do something like this :
$http.get(your_options).then(function(data){
}, function(err){
});
First function is your success callback and the second one is your error callback. More about $http can be found HERE
I am new to angularjs and web development is already not my forte, but I did search for an answer to this issue and can't find anything.
I am using ng-repeat on a div displayed as inline-block. I'm getting weird top and bottom spacing. I have a screenshot here: https://www.dropbox.com/s/dt2jw4cyv609t5q/screenshot.png.
Here is the base html:
<html>
<head>
<title>Knock Admin V1.0</title>
<script type="text/javascript" src="/assets/js/angular.js"></script>
<script type="text/javascript" src="/assets/js/angular-route.js"></script>
<script type="text/javascript" src="/assets/ng/admin/app.js"></script>
<link rel="stylesheet" type="text/css" href="/assets/ng/admin/css/style.css">
</head>
<body ng-app="admin">
<div id="sidebar">
Welcome
<br>Logout
</div>
<div id="view">
<div ng-view></div>
</div>
</body>
</html>
And the view template:
<h3>My Locations</h3>
<label for="filter">Filter:</label><input type="text" id="filter" ng-model="filter.input" />
<div id="locationCardCollection">
<div class="locationCard" ng-repeat="loc in locations | filter:filter.input" >
{{ loc.chain.name }} - {{ loc.name }} <br>
{{ loc.message }}
</div>
</div>
And lastly, the CSS:
body, div {
margin: 0;
padding: 0;
}
body{
background-color: #E4E4E4;
}
#view {
padding: 10px;
margin-left: 200px;
overflow: hidden;
}
#sidebar {
position: fixed;
height: 100%;
width: 200px;
background-color: #555555;
color: #FFFFFF;
}
div.locationCard {
background: #FFFFFF;
display: inline-block;
height: 400px;
width: 300px;
margin: 10px;
-webkit-box-shadow: 5px 5px 10px 1px #404040;
box-shadow: 5px 5px 10px 1px #404040;
}
div.locationCard.hover {
background-color: #FF0000;
}
I'm not doing anything tricky with formatting in the angular app code, so I'll leave that out unless otherwise requested. Can someone give me a hand here?
Thanks!
Added overflow: hidden to locationCard CSS.