I have different images when user select option from the drop down box, display different images but i am getting same images.
<!DOCTYPE html>
<html lang="en" ng-app="demo">
<head>
<meta charset="UTF-8">
<title>Hourlies</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js">
</script>
<script src="https://code.angularjs.org/1.5.0-beta.0/angular-route.min.js"></script>
<style>
.container{
margin-top: 10%;
background-color: rgb(245,245,245);
}
.wi{
width: 270px;
height: 300px;
border:3px solid black;
margin-top: 1%;
}
</style>
</head>
<body>
<div class="container">
<div class="col-lg-3">
</div>
<!-- end of col-3 -->
<div class="col-lg-9">
<div ng-controller="myCtrl">
<select
ng-model="selectedItem"
ng-options="S.value as S.label for S in selectables" ng-change="fun()">
</select>
<br><br>
<img src='{{selectedItem}}' class="wi"/>
<img src='{{selectedItem}}' class="wi"/>
<img src='{{selectedItem}}' class="wi"/>
<img src='{{selectedItem}}' class="wi"/>
<img src='{{selectedItem}}' class="wi"/>
<img src='{{selectedItem}}' class="wi"/>
<img src='{{selectedItem}}' class="wi"/>
<img src='{{selectedItem}}' class="wi"/>
<img src='{{selectedItem}}' class="wi"/>
</div>
<!-- end of col-9 -->
</div>
<!-- enf of main container -->
<script>
var app=angular.module('demo',['ngRoute']);
app.controller('myCtrl', function($scope) {
$scope.selectables = [
{
label: ' vallay',
value: 'http://www.quackit.com/pix/routeburn_track/routeburn_flats_t.jpg',
vlue:'http://www.freeimageslive.com/galleries/transtech/informationtechnology/preview/blue_screen.jpg',
value:'http://www.freeimageslive.com/galleries/transtech/informationtechnology/preview/chiclet_keyboard.jpg'
},
{ label: 'Tejas',
value: 'http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg'
}
];
});
</script>
</body>
</html>
You haven't added the function $scope.fun in your controller that you're calling from your dropdown; add it:
app.controller('myCtrl', function($scope) {
...
$scope.fun = function (){
//Call API here, Pass selected model and in success method of api set $scope.selectedObj = response;
//response is may be something like this {name:"category1", imageSrc: ["photo1.jpg","photo2.jpg".....]}
};
Related
UPDATE I've added full HTML output at bottom.
2nd UPDATE At the very bottom is how I've defined my angular module in file "app.js"
I have an ng-click that I'm trying to use to activate an ng-show elsewhere.
<div class="img_div" ng-click="showSwiper = ! showSwiper">
<img class="modal_img img_screenings" src="images/producersclub.jpg">
<p class="movie_p" align="center">EXPANDED METAL, 11am</p>
<p class="screenings_p" align="center">THE PRODUCERS CLUB</p>
<p class="location_p" align="center">PHILIP K. DICK FILM FESTIVAL</p>
<p class="date_p" align="center">May 29, 2017</p></div>
</div>
<div class="swiper-container" ng-show="showSwiper">
....
</div
When I click the div img_div, nothing appears to happen and element swiper-container does not appear.
I didn't think I needed to add anything to my controller to make this work. My controller:
(function () {
angular
.module('app')
.controller('screeningsController', Controller);
function Controller($scope, $location, $anchorScroll) {
$scope.scrollTo = function(id) {
$location.hash(id);
$anchorScroll();
}
$scope.seo = {
metaTitle : '', metaDescription : ''
};
$scope.$parent.seo = {
metaTitle : 'Screenings',
metaDescripton: 'A list of all upcoming screenings.'
};
}
}
)();
Is there anything that needs to be done to the controller to make this work?
<html ng-app="app" class="ng-scope">
<head>
<style type="text/css">#charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style>
<meta charset="UTF-8">
<title>title</title>
<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1">
<!--prerender.io & Facebook-->
<meta name="fragment" content="!">
<meta property="og:url" content="">
<meta property="og:title" content="Screenings">
<meta property="og:description" content="">
<meta property="og:image" content="">
<!--angular hash correction-->
<base href="/">
<!--swiper-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css" type="text/css">
<!--main-->
<link rel="stylesheet" href="css/style.css" type="text/css">
<!--swiper style-->
<link rel="stylesheet" href="css/swiper.css" type="text/css">
</head>
<body>
<!-- Swiper -->
<div class="swiper-container swiper-container-horizontal ng-hide" ng-show="showSwiper">
<div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px);">
<div class="swiper-slide swiper-slide-active" data-hash="the-producers-club" style="width: 1280px; margin-right: 30px;">
<img class="swiper_img" src="images/producersclub.jpg">
</div>
<div class="swiper-slide swiper-slide-next" data-hash="hummingbird-studios" style="width: 1280px; margin-right: 30px;">
<img class="swiper_img" src="images/CHI.png">
</div>
<div class="swiper-slide" data-hash="anthology-film-archives" style="width: 1280px; margin-right: 30px;">
<img class="swiper_img" src="images/large.jpg">
</div>
<div class="swiper-slide" data-hash="red-hook-vision-center" style="width: 1280px; margin-right: 30px;">
<img class="swiper_img" src="images/13119742_10209232217392526_8176078770950589764_o.jpg">
</div>
<div class="swiper-slide" data-hash="latino-sports-club" style="width: 1280px; margin-right: 30px;">
<img class="swiper_img" src="images/12419141_10208971503394839_6519551385362745616_o (1).jpg">
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination-fraction" style="display: none;">
<span class="swiper-pagination-current">1</span> / <span class="swiper-pagination-total">5</span></div>
<!-- Add Arrows -->
<div class="swiper-button-next fader" style="display: none;">
</div>
<div class="swiper-button-prev fader swiper-button-disabled" style="display: none;"></div>
</div>
<!--angular partials-->
<!-- uiView: --><ui-view class="ng-scope">
<!--HERE ARE THE NG-CLICKS-->
<div id="screenings" class="ng-scope">
<div class="img_div" ng-click="showSwiper = !showSwiper">
<img class="modal_img img_screenings" src="images/producersclub.jpg">
<p class="movie_p" align="center">EXPANDED METAL, 11am</p>
<p class="screenings_p" align="center">THE PRODUCERS CLUB</p>
<p class="location_p" align="center">PHILIP K. DICK FILM FESTIVAL</p>
<p class="date_p" align="center">May 29, 2017</p>
</div>
<div class="img_div" ng-click="showSwiper = !showSwiper">
<img class="modal_img img_screenings" src="images/CHI.png">
<p class="movie_p" align="center">EXPANDED METAL, 9pm</p>
<p class="screenings_p" align="center">HUMMINGBIRD STUDIOS</p>
<p class="location_p" align="center">CHICAGO, IL</p>
<p class="date_p" align="center">April 21, 2017</p>
</div>
<div class="img_div" ng-click="showSwiper = !showSwiper">
<img class="modal_img img_screenings" src="images/large.jpg">
<p class="movie_p" align="center">EXPANDED METAL, 6pm</p>
<p class="screenings_p" align="center">ANTHOLOGY FILM ARCHIVES</p>
<p class="location_p" align="center">NEW YORK, NY</p>
<p class="date_p" align="center">September 14, 2016</p>
</div>
<div class="img_div" ng-click="showSwiper = !showSwiper">
<img class="modal_img img_screenings" src="images/13119742_10209232217392526_8176078770950589764_o.jpg">
<p class="movie_p" align="center">EXPANDED METAL, 8pm</p>
<p class="screenings_p" align="center">RED HOOK VISION CENTER</p>
<p class="location_p" align="center">BROOKLYN, NY</p>
<p class="date_p" align="center">May 19, 2016</p>
</div>
<div class="img_div" ng-click="showSwiper = !showSwiper">
<img class="modal_img img_screenings" src="images/12419141_10208971503394839_6519551385362745616_o (1).jpg">
<p class="movie_p" align="center">EXPANDED METAL, 11:15pm</p>
<p class="screenings_p" align="center">LATINO SPORTS CLUB</p>
<p class="location_p" align="center">BROOKLYN, NY</p>
<p class="date_p" align="center">April 1, 2016</p>
</div>
</div>
<script class="ng-scope">
swiper.update();
//clear any pre-loaded slides
swiper.removeAllSlides();
//store images in swiper
$(".modal_img").each(function(i,x) {
var closest_venue = ($(this).closest('.img_div').find('.screenings_p').text());
closest_venue = closest_venue.replace(/\s+/g, '-').toLowerCase();
console.log(closest_venue);
swiper.appendSlide('<div class="swiper-slide" data-hash="' + closest_venue + '"><img class="swiper_img" src="' + $(this).attr("src") + '"/></div>');
})
//open swiper
//click an image
$(".img_div").click(function() {
//find position within swiper sliders
var position = $(this).index();
//show swiper
//$('.swiper-container').css('display', 'inline');
swiper.update();
//jump to position in swiper
swiper.slideTo(position,0,false );
});
//click events
//attach click event to previous button
$(".swiper-button-prev").click(function(){
$(".swiper-button-prev").data('clicked', true);
});
//attach click event to next button
$(".swiper-button-next").click(function(){
$(".swiper-button-next").data('clicked', true);
});
//attach click event to swiper image
$(".swiper_img").click(function(){
$(".swiper_img").data('clicked', true);
});
//close swiper
//click container
$(".swiper-container").click(function() {
//if previous button was clicked, do nothing
if($('.swiper-button-prev').data('clicked')) {
//if next button was clicked, do nothing
} else if($('.swiper-button-next').data('clicked')) {
//if image was clicked, do nothing
} else if($('.swiper_img').data('clicked')) {
//close container
} else
//$('.swiper-container').css('display', 'none');
//reset click events
$(".swiper-button-prev").data('clicked', false);
$(".swiper-button-next").data('clicked', false);
$(".swiper_img").data('clicked', false);
});
</script>
</ui-view>
</body>
</html>
Definition of angular module in app.js
(function () {
angular
.module('app', ['ui.router'])
.config(config)
.run(run);
etc.
Try below code
ng-click="showSwiper = !showSwiper"
And also post your full HTML and controller
Try this:
function Controller($scope, $location, $anchorScroll) {
$scope.showSwiper = false;
$scope.scrollTo = function(id) {
$location.hash(id);
$anchorScroll();
}
.... // more code
Now the variable is defined and the rest should work
please check working plnkr for this your issue
https://plnkr.co/edit/p7ZaebihQjSZ1Yvi9upM?p=preview
HTML
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="screeningsController">
<div class="img_div" ng-click="showSwiper = !showSwiper">
<img class="modal_img img_screenings" src="images/producersclub.jpg">
<p class="movie_p" align="center">EXPANDED METAL, 11am</p>
<p class="screenings_p" align="center">THE PRODUCERS CLUB</p>
<p class="location_p" align="center">PHILIP K. DICK FILM FESTIVAL</p>
<p class="date_p" align="center">May 29, 2017</p></div>
</div>
<div class="swiper-container" ng-show="showSwiper">
Display section
</div>
</body>
</html>
Js
var app = angular.module('plunker', []);
(function () {
angular
.module('plunker')
.controller('screeningsController', Controller);
function Controller($scope, $location, $anchorScroll) {
$scope.scrollTo = function(id) {
$location.hash(id);
$anchorScroll();
}
$scope.seo = {
metaTitle : '', metaDescription : ''
};
$scope.$parent.seo = {
metaTitle : 'Screenings',
metaDescripton: 'A list of all upcoming screenings.'
};
}
}
)();
Your code is working fine. May be issue is with your HTML Structure. you have one extra closing div in the HTML you posted.
Working Snippet
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.showSwiper = false;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div class="img_div" ng-click="showSwiper = ! showSwiper">
<img class="modal_img img_screenings" src="">
<p class="movie_p" align="center">EXPANDED METAL, 11am</p>
<p class="screenings_p" align="center">THE PRODUCERS CLUB</p>
<p class="location_p" align="center">PHILIP K. DICK FILM FESTIVAL</p>
<p class="date_p" align="center">May 29, 2017</p></div>
<div class="swiper-container" ng-show="showSwiper">
....
</div>
</div>
I have a search button with an <input> field. The button has ng-click="run()" which works immediately typing inside the input field. Isn't it suppose to work after the button is clicked?
I am new on AngularJS. Got stuck at this point.
Thanks in advance.
<!DOCTYPE html>
<html lang="en" ng-app="myApp" ng-controller="MovieController">
<head>
<title ng-bind="'trivago.com: ' + details.Title"></title>
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, userscalable=no">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
</head>
<body>
<div class="container-fluid outerdiv">
<nav class="navbar navbar-fixed-top">
<div class="container-fluid" style="border-bottom:2px solid #C1C3C5;">
<div class="navbar-header">
<a class="navbar-brand" href="#"><b><span style="color:#027FAE;">tri</span><span style="color:#F48E05;">va</span><span style="color:#C84735;">go</span></b><!--<span class="span-style">Movie Browser</span>--></a>
<a class="fa fa-heart" href="#"></a>
<a class="navbar-brand" href="#">GBP</a>
<a class="navbar-brand" href="#">EN</a>
<a class="navbar-brand" href="#">MY PROFILE</a>
</div>
</div>
</nav>
<noscript>
<div class="nojs">Javascript is either disabled or not supported in your browser. Please enable it or use a Javascript enabled browser.</div>
</noscript>
<center><div class="az">
<!--<div class="animated zoomInRight">-->
<p class="text-center" style="color:#057AA9; font-size:28px;">Find your ideal hotel <br>for the best price </p>
<div class="input-group search-bar animatedz">
<input float="right" type="text" ng-model="search" ng-model-options="{ debounce: 800 }" class="form-control" autofocus />
<span class="input-group-btn">
<button class="btn btn-primary" type="button" ng-click="run()">Search</button>
</span>
</div>
<div id="main-info" ng-include="'partials/main-info.html'" class="col-md-8"></div>
<!--<div id="related-results" ng-include="'partials/related-results.html'" class="col-md-4 animated bounce related-results"></div>-->
</div></center>
</div>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
<div class="container footer">
<div class="col-xs-4">
<center><i class="fa fa-search"></i></center>
<p class="text-center">Find your ideal hotel at the best price <br> with the world's largest hotel search</p>
</div>
<div class="col-xs-4">
<center><i class="material-icons"></i></center>
<p class="text-center">Compare over 1 million hotels<br>from 250+ sites</p>
</div>
<div class="col-xs-4">
<center><i class="fa fa-smile-o"></i></center>
<p class="text-center">Read the unbiased and <br>accurate traveller reviews</p>
</div>
</div>
</body>
</html>
app.js:
'use strict';
$scope.search = "Up";
function fetch(){
$http.get("http://www.omdbapi.com/?t=" + $scope.search + "&tomatoes=true&plot=full")
.then(function(response){ $scope.details = response.data; });
$http.get("http://www.omdbapi.com/?s=" + $scope.search)
.then(function(response){ $scope.related = response.data; });
}
$scope.update = function(movie){
$scope.search = movie.Title;
};
$scope.run= function(){
fetch();
}
});
Here's a working example with most of your code, hope it helps.
function exampleController($scope, $http) {
function fetch() {
$http.get("http://www.omdbapi.com/?t=" + $scope.search + "&tomatoes=true&plot=full")
.then(function(response) {
$scope.details = response.data;
});
$http.get("http://www.omdbapi.com/?s=" + $scope.search)
.then(function(response) {
$scope.related = response.data;
});
}
$scope.update = function(movie) {
$scope.search = movie.Title;
};
$scope.run = function() {
fetch();
};
}
angular
.module('app', [])
.controller('exampleController', exampleController);
.container-fluid {
background-color: #1D1F20;
color: #fff;
font-size: 14px;
font-weight: bold;
}
.row {
padding: 10px;
}
.input {
color: #333;
}
pre {
margin-bottom: 10%;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid" ng-app="app">
<div class="container" ng-controller="exampleController">
<div class="row">
<input class="input" type="text" ng-model="search" />
</div>
<div class="row">
<button class="btn btn-primary" ng-click="run()">Start Search</button>
</div>
<div class="row">
<pre ng-bind="details | json"></pre>
</div>
</div>
</div>
Why is the horizontal collapse jerky? It starts to open normally, stops for a bit, and then opens completely. There are no margins, nor padding on the elements in this example
https://plnkr.co/edit/85K7YhCG0inVpcwAhyjC?p=preview
Edit: It runs smoother if I put a fixed width on the contents (Set ul to width 400px). Is this the only way?
html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<nav class="navbar navbar-default" role="navigation" ng-init="nc=true;">
<div class="navbar-header">
<div class="uib-collapse" uib-collapse="nc" horizontal>
<ul class="">
<li ng-repeat="menu in fm.genericMenus" class="" >
<a class="" href="" ng-href="{{menu.Url}}" ng-bind="menu.Text"></a>
</li>
</ul>
</div>
<button type="button" class="navbar-toggle" ng-click="nc=!nc">
<span class="sr-only">Toggle navigation</span>
<span>Click</span>
</button>
<a href="#" class="logo">
<img src="https://upload.wikimedia.org/wikipedia/bar/a/a6/Nintendo-Logo.svg" />
</a>
</div>
</nav>
</body>
</html>
css
.logo img {
width:100px;
}
ul {
padding:0;
}
li {
display:inline-block;
padding: 10px 5px;
}
a {
font-size:8px;
}
.uib-collapse, button {
float:right;
height:50px;
}
button {
margin:0 !important;
}
.collapsing {
transition-duration:3s;
}
js
var app = angular.module('app', ['ui.bootstrap', 'ngAnimate']);
app.controller('MainCtrl', function($scope) {
$scope.fm = {
genericMenus:[
{Text:'CALENDAR'},
{Text:'BUYING'},
{Text:'SELLING'},
{Text:'DEPARTMENTS'},
{Text:'NEWS & VIEWS'}
]
};
});
Looks like a bug with the library. I'm getting the same behavior on the bootstrap demo page. Less noticeable because they have faster easing, but it's there. Your workaround seems like a good interim solution.
I am using Bootstrap 3 to create a page that contains a navbar which needs to be fixed (navbar-fixed-top) and a table below. The table is displayed correctly when I just use navbar-default. As soon as I add navbar-fixed-top, the table header seems to go under the navbar. Anything I am missing here ? The sample is available in Plnkr as well : http://plnkr.co/edit/cNVjIDI6C4vOKMHVWWrT?p=preview
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Interaction Summary Comparision View</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"></link>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-animate.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.1/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-spinner/0.8.1/angular-spinner.min.js"></script>
<script type="text/javascript" src="//cdn.rawgit.com/adonespitogo/angular-loading-spinner/master/angular-loading-spinner.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/restangular/1.5.2/restangular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.min.js"></script>
<style>
.full button span {
background-color: limegreen;
border-radius: 32px;
color: black;
}
.partially button span {
background-color: orange;
border-radius: 32px;
color: black;
}
</style>
<!-- Angular logic -->
<script>
// Angular App
var app = angular.module('myApp', ['ui.router', 'ui.bootstrap', 'ngAnimate', 'restangular', 'ngLoadingSpinner']);
app.factory('dataService', function($http, Restangular) {
var exports = {};
exports.getRestangular = function() {
return Restangular.setBaseUrl("https://cdn.rawgit.com/venkyvb/164b6c12a4f8bc72a02b12234a32bc9c/raw/daa51de397e90387ef51e07e25e971f24c667d0c");
}
exports.getData = function() {
return exports.getRestangular().all("summary.json").getList();
}
return exports;
});
// Controllers
app.controller('SummaryController', function($scope, $rootScope, $filter, dataService) {
$scope.summary = [];
dataService.getData().then(function(data) {
$scope.summary = data.plain();
},
function(data) {
// Error
});
$scope.downloadCsv = function() {
window.open('data:text/csv;charset=utf-8,' + escape(Papa.unparse(angular.toJson($scope.summary))));
};
});
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
var summaryList = {
name: 'SummaryList',
url: '/',
templateUrl: '/summary_list.html',
controller: 'SummaryController',
};
$stateProvider.state(summaryList);
});
</script>
<!-- Templates -->
<script type="text/ng-template" id="/summary_list.html">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Summary View</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>
<span class="glyphicon glyphicon-download-alt" title="Download CSV"></span>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="search form-control" ng-model="search.$" placeholder="Search in table">
</div>
</form>
</div>
</nav>
</div>
<div class="col-sm-12">
<div class="panel panel-default">
<div class="table-responsive">
<table class="table table-hover" ts-wrapper>
<thead>
<th>E2E time</th>
<th>Server time</th>
<th>Step</th>
<th>Total</th>
</thead>
<tr ng-repeat="entry in summary | filter:search" ts-repeat>
<td>{{ entry.e2e_time }}</td>
<td>{{ entry.server_time }}</td>
<td>{{ entry.step }}</td>
<td>{{ entry.total_transactions }}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</script>
</head>
<body>
<div class="container-fluid">
<span us-spinner="{radius:30, width:8, length: 16}"></span>
<div data-ui-view></div>
</div>
</body>
</html>
Add this in your style
body{
margin-top:70px;
}
#media(max-width: 768px){
body{
margin-top:180px;
}
}
You must use margin-top style on your table
Sadly, bootstrap 3 never included a padding or a margin when you make a navbar fixed. So you should do it manually.
.col-sm-12 {
width: 100%;
margin-top: 3%;
}
This would give some margin!
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.