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>
Related
Angular.JS issue with ng-repeat value from inputs
I'm having an issue with ng-repeat, where I can't see to get the values from the input to show on the UI when submitted.
I'm very new to angular JS, hence why I'm trying to build a simple to do app to learn the basics.
On the newItem.html page, there is a form with a function Add(). There are two inputs for the project and the title. There is a button to add the new to do item.
Once the button is clicked and it runs the Add() function, it should add a new object to the toDoList array with the Project and the Task.
On the homePage.html I want to display a project title and the task details. Later down the line I want to generate the entire row on each click but for now I'm just trying to get the text to change.
I'm obviously missing something obvious here, I've read through the documentation for ng-repeat and ng-model, but just can't seem to grasp it.
index.html
<!DOCTYPE html>
<html lang="en" ng-app="ToDoListApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>To Do App</title>
<script src="angular/angular.min.js"></script>
<script src="angular-route/angular-route.min.js"></script>
<script src="app.module.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="app/assets/css/home.css">
<link href="https://fonts.googleapis.com/css?family=Acme&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/4c765e5630.js" crossorigin="anonymous"></script>
</head>
<body ng-view ng-controller="toDoCtrl">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
</body>
</html>
homePage.html
<div class="row header">
<div class="col-12">
<h1>DOINGO</h1>
<p>0 Open Tasks</p>
</div>
</div>
<div class="row toDoList">
<div class="row newItem">
<div class="col-2">
<button class="itemComplete btn"><i class="far fa-check-circle fa-2x"></i></button>
</div>
<div class="col-8">
<h4 ng-repeat="Project in ToDoList">{{ToDoList.Project}}</h4>
<p ng-repeat="Task in ToDoList">{{ToDoList.Task}}.</p>
</div>
<div class="col-2">
<button class="btn deleteItem"><i class="far fa-times-circle fa-2x"></i></button>
</div>
</div>
</div>
<div class="row addItemRow">
<div class="col-12 text-center">
<a href="#/newItem"><button type="button" class="btn btn addItem">
<i class="fas fa-plus-circle fa-3x"></i>
</button></a>
</div>
</div>
newItem.html
<div class="row header">
<div class="col-12">
<h1>DOINGO</h1>
</div>
</div>
<div class="row addNewItem">
<form ng-submit='Add()' class="form">
<div class="row projectInput text-center">
<div class="col-12">
<input type="text" ng-model="ToDoList.Project" placeholder="Enter a project title" ng-required>
</div>
</div>
<div class="row taskInput text-center">
<div class="col-12">
<input type="text" ng-model="ToDoList.Task" placeholder="Enter your task details" ng-required>
</div>
</div>
<div class="buttonRow row">
<div class="col-12 text-center">
<button type="submit" class="btn-lg btn-success addItemButton">Add</button>
</form>
<button class="btn-lg btn-danger cancelButton">Cancel</button>
</div>
</div>
</div>
app.module.js
var app = angular.module('ToDoListApp', ['ngRoute']);
app.config(function ($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when("/", {
templateUrl: "app/home/homePage.html",
controller: "toDoCtrl"
})
.when("/newItem", {
templateUrl: "app/newItem/newitem.html",
controller: "toDoCtrl"
})
.otherwise({
redirectTo: '/'
})
});
//main controller for app functionality
app.controller('toDoCtrl', function ($scope) {
$scope.ToDoList = []
//add the new to do item to the array
$scope.Add = function () {
$scope.ToDoList.push({
Project: $scope.Project,
Task: $scope.Task
});
$scope.Project = '';
$scope.Task = '';
};
});
Hi I'm new with Web API's and I'm working with AngularJS and Web API I'm trying to upload an image into a Web API but when I click the button to send the image it gives me an error
I already did the method GET and it shows me all the images that are in that web API but it doesn't work the method POST
here is my code
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" media="screen">
<link rel="stylesheet" href="css/bootswatch.min.css">
</head>
<body>
<div ng-app="MarcasApp" >
<div ng-controller="MarcaController">
<div class="container">
<h2>Muestra</h2>
</div>
<input type="button" class="btn btn-info" value="Todos" ng-click="getTodos()">
<form name="formulario" method="post" action="" enctype="multipart/form-data">
<div class="container">
<label for="caption">Id:</label>
<input type="input" class="form-control" ng-model="txtId"/>
</div>
<div class="container">
<label for="caption">Cargar Marcar:</label>
<input type="file" ng-files="getTheFiles"/>
</div><br>
<div class="container">
<input type="submit" value="Enviar Marca" class="btn btn-success"
ng-click="btnGuardar()"/>
</div><br>
<div class="container">
Mensaje:{{msgGuardar}}
</div>
</form>
<div class="panel panel-info">
<ul class="list-group" ng-repeat="marca in marcas">
<li class="list-group-item">
<img src="{{marca.imagen}}">
{{marca.marca1}} + {{marca.marcaId}}
</li>
</ul>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="MarcaJson.js"></script>
</body>
</html>
MarcaJson.js
var app = angular
.module("MarcasApp", [])
.controller("MarcaController", function($scope, $http){
$scope.getTodos =function(){
var apiUrl = 'http://tiendawebapi.azurewebsites.net/api/marcas/';
$http.get(apiUrl).then(function(response){
$scope.marcas = response.data;
});
};
$scope.btnGuardar = function(){
var datos = {
id: $scope.txtId,
imagen: $scope.getTheFiles
}
var apiUrl = 'http://tiendawebapi.azurewebsites.net/api/marcas/';
$http.post(apiUrl, JSON.stringify(datos)).then(function(response){
if (response.statusText == Created){
$scope.msgGuardar = "Marca Guardada";
}
}, function(error){
$scope.msgGuardar = "Ocurrio un error " + error.statusText;
});
};
});
I'm trying to convert div element to canvas using html2canvas library inside angularjs controller, it throws no error in console but only gives an empty canvas, I included the html2canvas script in master page and the div element is inside a template page which is loaded using ng-view
the div element is
<div id="barcodeHtml" style="background-color: #82c6f8">
<div style="width: 20%;float: left;display: list-item;"></div>
<div style="width: 40%;float: left; align-content: center">
<h2 style="display: inline;">CCAD</h2>
<br>
<div style="float: left;width: 50%">
<h4>MEMBER NAME</h4>
<h2>{{memberName}}</h2>
</div>
<div style="float: right;width: 50%"></div>
<br>
<br>
<div style="float: left;width: 100%">
<h4>MEMBER SINCE</h4>
<h3>{{memberSince}}</h3>
</div>
<br>
<br><br>
<br>
<img src="{{imgSource}}"/>
</div>
</div>
<a class="btn btn-custom" ng-click="getCanvas()">get Canvas</a>
and the angular controller
$scope.getCanvas=function()
{
$scope.memberName=data.html.name;
$scope.memberSince=data.html.year;
$scope.imgSource=data.html.code;
html2canvas($("#barcodeHtml"), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
}
what am I missing?
thank you in advance..
The issue is your div with id="barcodeHtml" does not have height so it is not able to append to the body.
Try this
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.getConvas=function()
{
html2canvas($("#barcodeHtml"), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
}
})
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div id="barcodeHtml" style="background-color: #82c6f8; height: 200px;">
<div style="width: 20%;float: left;display: list-item;"></div>
<div style="width: 40%;float: left; align-content: center">
<h2 style="display: inline;">CCAD</h2>
<br>
<div style="float: left;width: 50%">
<h4>MEMBER NAME</h4>
<h2>{{memberName}}</h2>
</div>
<div style="float: right;width: 50%"></div>
<br>
<br>
<div style="float: left;width: 100%">
<h4>MEMBER SINCE</h4>
<h3>{{memberSince}}</h3>
</div>
<br>
<br><br>
<br>
<img src="{{imgSource}}"/>
</div>
</div>
<a class="btn btn-custom" ng-click="getConvas()">get Convas</a>
</div>
</body>
</html>
There is an issue with your inline-styling.
I tried with removing float: left; from your upper div [from here : <div style="width: 40%;float: left; align-content: center">], then it worked.
See the working fiddle
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>
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.