How should i implement this:
4 tabs which open onclick and loads a view in to a child.
Tried with 4 ng-view tags and hiding 3 of them but it doesn't feel right. How should I display my content in the right tab?
<section id="tabs">
<div class="tab open">
<div ng-view></div>
</div>
<div class="tab">
<div ng-view></div>
</div>
<div class="tab">
<div ng-view></div>
</div>
<div class="tab">
<div ng-view></div>
</div>
</section>
you should use bootstrap for a tabs and ng-include for a content
something like this
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Le styles -->
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="http://code.angularjs.org/1.2.12/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.12/angular-cookies.min.js"></script>
<script src="http://code.angularjs.org/1.2.12/angular-route.min.js"></script>
<script src="http://code.angularjs.org/1.2.12/angular-resource.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
</head>
<body>
<div class="container">
<!-------->
<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active">Red</li>
<li>Orange</li>
<li>Yellow</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="red">
<div ng-include src="'red.html'"></div>
</div>
<div class="tab-pane" id="orange">
<div ng-include src="'orange.html'"></div>
</div>
<div class="tab-pane" id="yellow">
<div ng-include src="'yellow.html'"></div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('#tabs').tab();
});
</script>
</div> <!-- container -->
<script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
</body>
</html>
Angular UI bootstrap module has all the twitter bootstrap components ported as angular modules. You should be using it instead of reinventing it (unless you cannot/dont want to use twitter bootstrap).
tldr: Try using bootstraps tabs component from angular UI bootstrap
Related
I am using bootstrap's popover, but I don't want the popover overflow it's wrapper, any ideas?
Demo on Plunker
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/1.5.5/angular.js" data-semver="1.5.5" data-require="angularjs#1.5.5"></script>
<script data-require="ui-bootstrap#*" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>
<script data-require="bootstrap.js#*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" data-semver="3.3.6" data-require="bootstrap-css#*" />
<script src="controller.js"></script>
<script id="calendar.html" type="text/ng-template">
<uib-datepicker ng-model="date" show-weeks="false">
</datepicker>
</script>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="popover.css">
</head>
<body>
<div ng-app="my-app" ng-controller="controller">
<div class="card">
<div class="card-panel">
<div class="card-body">
<div class="row">
<p>BAbababababbabababababababababababababbabaabbabaabababbBAbababababbabababababababababababababbabaabbabaabababbBAbababababbabababababababababababababbabaabbabaabababb</p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-panel">
<div class="card-body">
<div class="row">
<div class="col-xs-12" style="text-align:center;">
<h2>Here is a list a weapons</h2>
</div>
</div>
<div class="row" ng-repeat="item in weaponItems">
<div class="col-xs-12">
<div class="col-xs-6" ng-click="selectItem(item)" uib-popover-template="'popover.html'" popover-is-open="isOpen && item === selectedItem" popover-trigger="click" popover-placement="auto right">
<div class="panel">
<div class="panel-body" style="min-height:120px;">
<div><b>Category:</b> {{item.title}}</div>
<p><b>Desc:</b> {{item.desc}}</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="panel" style="text-align:center;">
<img src="{{item.img}}" height="120px" width="auto">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I think I don't make my question clear, see the attached imagethe red line surrounded area is the card-panel area, and the green line surrounded is the popover. Here, I don't want the popover beyond the panel area.
Declare word-wrap on the overflowing element.
.card-body p{
word-wrap: break-word;
}
So, at the moment I have an index.html page that contains every single reference to all scripts I need (angular libraries, jquery libraries, third party plugins, custom javascripts, controllers, directives, services, etc). As you can see this is not ideal because the browser will load all of these dependencies when not all of them are really needed all the time.
Is there a way to load only the scripts needed by the view that is loaded? In the same fashion, these scripts must be removed when the view changes, and accept news if needed.
I've made a sample plunker with some simple stuff representing my problem
<html ng-app="myapp">
<body class="container">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" ui-sref="index">Sample</a>
<ul class="nav">
<li>
<a ui-sref="route1">Route 1</a>
</li>
<li>
<a ui-sref="route2">Route 2</a>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="span12">
<div class="well" ui-view></div>
</div>
</div>
<!-- App Script -->
<script src="app.js"> </script>
<!-- This is what I have now and no likey-->
<script src="script1.js"> </script>
<script src="script2.js"> </script>
<script src="script3.js"> </script>
<script src="script4.js"> </script>
<script src="script5.js"> </script>
<script src="script6.js"> </script>
<script src="script7.js"> </script>
.
.
.
<script src="script100.js"> </script>
</body>
</html>
I have been following the docs for ui-bootstrap. And in the section(ui.bootstrap.collapse) they talk about making a collapse function for content when you click a button.
But I cannot seem to make the Collapse seem to work in my code.
What am I missing or doing wrong?
I have looked at other Stacks and have seen that other people use anchor tags instead of button tags. So I don't think that is the issue.
Index HTML
<!DOCTYPE html>
<html lang="en" data-ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="description" content="stuff">
<meta name="keywords" content="stuff">
<meta name="author" content="stuff">
<title> Title</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css">
<!-- Custom styles -->
<link href="css/style.css" rel="stylesheet">
<link href="css/svg_style.css" rel="stylesheet">
<!--Jquery -->
<script src="lib/jquery/dist/jquery.min.js"></script>
<!-- Angular -->
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular-route/angular-route.min.js"></script>
<script src="lib/angular-animate/angular-animate.min.js"></script>
<script src="lib/angular-cookies/angular-cookies.min.js"></script>
<!-- Bootstrap -->
<script src="lib/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="lib/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
</head>
<body id="index_body">
<div data-ng-controller="HeaderCtrl">
<div class="top-header" data-ng-include="templateUrl"></div>
</div>
<div class="page [[ pageClass ]]" ng-view autoscroll="true"></div>
<!-- Main JS -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/headerCtrl.js"></script>
<script src="js/controllers/modal.js"></script>
<script src="js/controllers/ResonanceCtrl.js"></script>
<script src="js/controllers/ContactCtrl.js"></script>
<script src="js/controllers/LandingCtrl.js"></script>
<script src="js/controllers/SignInCtrl.js"></script>
<!-- Directives -->
<!-- <script src="js/directives/LandingAnimation.js"></script> -->
<script src="js/jq.js"></script>
</body>
</html>
Landing Page HTML
<div class="col-xs-12 col-sm-12 col-md-5">
<div class="caption">
<h1 class="text-left h-color thin">
Text Header
</h1>
<p class="lead p-color">More Text</p>
<!-- Here is my Toggle Button --> <a class="lead p-color learn-button togglebtn shake shake-rotate" data-ng-click="isCollapsed = !isCollapsed">
<small>
<i class="glyphicon" data-ng-class="{'glyphicon-minus': status.open, 'glyphicon-plus': !status.open}"></i> Learn More
</small>
</a>
</div>
</div>
<div class="hidden-xs hidden-sm col-md-7 col-lg-offset-1 col-lg-6">
<img alt="Image" class="img-responsive center-block" src="images/kip-animation.png" />
</div>
<!--Here is the what I want to collapse -->
<div id="myContent" collapse="isCollapsed" class="row row-offset row-pad" style="margin: 0 30px">
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="lead caption text-center">
<h3 class="h-color2">Item 1</h3>
</div>
<div class="thumbnail">
<img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
</div>
<div class="lead caption">
<p class="p-color"><small>Text</small>
</p>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="lead caption text-center">
<h3 class="h-color2">Item 2</h3>
</div>
<div class="thumbnail">
<img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
</div>
<div class="lead caption">
<p class="p-color"><small>Text</small>
</p>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="lead caption text-center">
<h3 class="h-color2">Item 3</h3>
</div>
<div class="thumbnail">
<img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
</div>
<div class="lead caption">
<p class="p-color"> <small>Some Text</small>
</p>
</div>
</div>
</div>
<!-- END DROPDOWN-->
App Javascript
var app = angular.module('app', ['ui.bootstrap', 'ngRoute', 'ngAnimate']);
app.config(function($interpolateProvider, $routeProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
$routeProvider
.when('/', {
templateUrl : 'pages/LandingPage.html',
controller : 'LandingCtrl'
})
.otherwise({ redirectTo: '/signin'});
});
Controller Javascript
app.controller('LandingCtrl', function($scope) { // jshint ignore:line
$scope.pageClass = 'page-landing';
$scope.isCollapsed = true;
});
I solved the issue. I was using Jquery before to toggle the display either hidden or shown.
In my Css I had:
myContent {
display: none;
}
Once I deleted that. It worked perfectly fine.
I am getting an error of ngRoute not found while I added angular-route.js i can't understand why this is happening
<!DOCTYPE html>
<html ng-app="Userapp">
<head>
<title>Alltotal</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/lib/angular.js"></script>
<scipt src="js/lib/angular-route.js"></scipt>
<script src="js/app.js"></script>
<script src="js/controller/register.js"></script>
<script src="js/controller/show.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<!--navigation-->
<div class="col-lg-12">
<ul class="nav nav-tabs">
<li role="presentation" class="active">Register</li>
<li role="presentation">Show users</li>
</ul>
</div>
</div>
<!--view-->
<div class="row">
<div class="col-lg-12">
<div ng-view></div>
</div>
</div>
</div>
</body>
</html>
And my javascipt is I think it is totally correct but not working when run
var app = angular.module("Userapp", ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.when('/', {templateUrl : 'partials/form.html',
controller: 'formctrl'});
});
That's a typo! Must be script:
<scipt src="js/lib/angular-route.js"></scipt>
I succeeded without problems to launch the carousel in it standard form. Now, I would like to use the thumbnails below the carousel to select and force the image I want to see. This feature is on top of what exists within the carousel already. Ideally I wish to have a also an "active" class that I can use on the thumbnails to highlight which thumbnail I currently have on display in the carousel.
If somebody can help me for this next step.
thanks a lot
Peter
<html ng-app="myApp">
<head>
<title>Bootstrap tests</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container" ng-controller="Ctrl">
<h1>test Carousel</h1>
<div class="row">
<div >
<carousel interval="myInterval">
<slide ng-repeat="image in images" active="image.active">
<img ng-src="{{image.image}}" >
<div class="carousel-caption">
<p>{{image.text}}</p>
</div>
</slide>
</carousel>
</div>
<div class="clearfix"></div>
<div class="row" style="background-color:sienna">
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1" ng-repeat="image in images" ng-click="select(slide)">
<div class="thumbnail">
<img src="{{image.thumbnail}}">
</div>
</div>
</div<
</div>
<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<script src="js/underscore-min.js"></script>
<script src="js/jquery-1.11.0.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/ui-bootstrap-custom-tpls-0.10.0.min.js"></script>
<script type="text/javascript" src="js/servicesGetImages.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
use ng-class here like this:
<slide ng-repeat="image in images" ng-class="{ active : 'image.active'}">