Images are not displaying on screen for slideshow carousel. In the console under elements, I clearly see the path: but they are not showing on the screen.
Could someone please help with this? I have the images in subfolders and when i click a folder the image paths change correctly. Can't figure this one out. Thank you!
index.html
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="example.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="CarouselDemoCtrl">
<div style="height: 305px">
<div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
<div uib-slide ng-repeat="slide in slides">
<img ng-src="{{uri}}/{{currentFolder}}/{{slide}}" style="margin:auto;">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="navbar navbar-default navbar-fixed-botom" role="navigation">
<div class="container">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ng-repeat="folder in folders" ng-class="{active:activeFolder(folder)}" ng-click="selectFolder(folder)">
<a ng-href="#{{folder}}">{{folder}}</a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
</div>
</body>
</html>
example.js
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope) {
$scope.myInterval = 5000;
$scope.noWrapSlides = false;
$scope.active = 0;
var currentIndex = 0;
$scope.uri = "slides";
$scope.folders = ['cats','dogs'];
$scope.slides = ["1.jpg","2.jpg","3.jpg"];
$scope.currentFolder = $scope.folders[0];
$scope.selectFolder = function (folder) {
$scope.currentFolder = folder;
};
$scope.activeFolder = function (folder) {
return (folder === $scope.currentFolder);
};
});
Carousel is missing an index to find your slides. Add an id property to your slide, starting at 0. This way bootstrap can skip to the next index.
Change your HTML to:
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="example.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="CarouselDemoCtrl">
<div style="height: 305px">
<div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
<div uib-slide ng-repeat="slide in slides" index="slide.id">
<img ng-src="{{uri}}/{{currentFolder}}/{{slide.image}}" style="margin:auto;">
</img>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="navbar navbar-default navbar-fixed-botom" role="navigation">
<div class="container">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ng-repeat="folder in folders" ng-class="{active:activeFolder(folder)}" ng-click="selectFolder(folder)">
<a ng-href="#{{folder}}">{{folder}}</a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
</div>
</div>
</body>
</html>
And your javascript to:
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope) {
$scope.myInterval = 5000;
$scope.noWrapSlides = false;
$scope.active = 0;
var currentIndex = 0;
$scope.uri = "slides";
$scope.folders = ['cats','dogs'];
$scope.slides = [{image:"1.jpg", id:0},{image: "2.jpg", id:1},{image:"3.jpg", id:2}];
$scope.currentFolder = $scope.folders[0];
$scope.selectFolder = function (folder) {
$scope.currentFolder = folder;
};
$scope.activeFolder = function (folder) {
return (folder === $scope.currentFolder);
};
});
If the paths are updating and they look correct, then this is unlikely to be an Angular problem. My guess is that the path that's specified is not correct.
From your code I can see that you're specifying a relative path (e.g. slides/cats/1.jpg), but it's relative to the current path. So, if your current path is www.mywebpage.com/foo/bar, it would expect the image to be at www.mywebpage.com/foo/bar/slides/cats/1.jpg. Is that where your image is?
If not, try one of these 2 options.
Add a / to the beginning of the path /slides/cats/1.jpg. That'll get the browser to request the image from www.mywebpage.com/slides/cats/1.jpg
Specify an absolute URL to be super extra sure it's coming from the right place:
See here for how to get the current url: Get current url in Angular
Related
I've looked at ng-view according to
https://docs.angularjs.org/api/ngRoute/directive/ngView
However, I'm very unsure as to how I would incorporate the above with the dropdown menu.
Here's a few screenshots showing what the website currently looks like for reference.
imgur.com/a/NUVEe
Here's the code
index.html
<html ng-app="app">
<head>
<link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<body ng-controller="MainController">
<nav class="navbar navbar-default">
<div class="container"> <!-- top intro part -->
<div class="navbar-header">
<a class="navbar-brand" href="#/"> OPENCV 3.0.0</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
<ng-view>
<div class="row"> <!-- Dropdown menu -->
<div class="col-md-20">
<div id="main">
<form class="form-horizontal" role="form">
<label class="control-label col-md-2">Filter List:</label>
<div class="col-md-5">
<select class="form-control"
ng-options="filter for filter in filters"
ng-model="filter"
ng-change="GoToOpenCVpage(filter)">
<option value=""> Select Filter</option>
</select>
</div>
</form>
</div>
</div>
</div>
</ng-view>
<div id = "content"> <!-- stuff showing opencv filter goes in here -->
<ng-view>
</ng-view>
</div>
<script src="js/angular.min.js"></script>
<script src="js/ui-bootstrap-tpls-0.14.3.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
makegray.html (the html content I want to inject into index.html)
<html ng-app="app">
<head>
<link rel="stylesheet" href="../css/bootstrap.min.css" />
</head>
<body ng-controller="MainController">
<nav class="navbar navbar-default">
<div class="container"> <!-- top intro part -->
<div class="navbar-header">
<a class="navbar-brand" href="#/"> MAKE GRAY</a>
</div>
</div>
</nav>
<form action="../php/makegray.php" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>
<script src="js/angular.min.js"></script>
<script src="js/ui-bootstrap-tpls-0.14.3.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
angularJS
var app = angular.module("app", ["ui.bootstrap"]);
/*app.factory("API", function($http) {
return {
getFilters: function(callback) {
$http.get("filters.php").success(callback);
}
}
});*/
app.controller("MainController", function($scope) {
$scope.ListOfOpenCV = {}; // declare array
// $scope.ListOfOpenCV.filter = "";
$scope.filters = ["MakeGray", "Sobel"];
//$scope.ListOfOpenCV.filter = $scope.filters[0];
$scope.GoToOpenCVpage = function(filter){
if(filter === "MakeGray"){
// window.location("pages/Canny.html");
window.open("pages/MakeGray.html", "_blank","height = 400, width = 700");
}
};
});
how to use marquee with ng-repeat in angular js?
I tried
<marquee>
<span ng-repeat="item in allItems">
<img src="img/ticker.png" style="padding-top:3px;">{{item.news}}
</span>
</marquee>
But it doesn't seem to work
Also, please suggest some sliding news ticker designed in Angular Way.
you have forgotten the {{ }} marks
<marquee>
<span ng-repeat="item in allItems">
<img src="img/ticker.png" style="padding-top:3px;">{{item.news}}
</span>
</marquee>
EDIT: since you have edited your question to include the solution
marquee is deprecated in HTML5, you should use a CSS solution, or an angular one
here is a simple fiddle with marquee functionality, and a ticker
There is a working example on jsfiddle.
<div ng-app="TestAPP">
<div ng-controller='test'>
<marquee >
<span ng-repeat="item in allItems">
<img src="img/ticker.png" style="paddingtop:3px;"/>
{{item.news}}
</span>
</marquee>
</div>
</div>
https://jsfiddle.net/rod3qo7x/3/
You can try this also
angular.module('angular-news-ticker', [])
.controller('newsCtrl', function ($scope, $interval) {
$scope.start=0;
$scope.totalitem=4;
$scope.news=[{obj:'news1'},{obj:'news2'},{obj:'news3'},{obj:'news4'},{obj:'news5'},{obj:'news6'},{obj:'news1'},{obj:'news2'},{obj:'news3'},{obj:'news4'},{obj:'news5'},{obj:'news6'}];
$scope.totalnumofitem=$scope.news.length;
$scope.next=function () {
if ($scope.totalitem < $scope.totalnumofitem) {
$scope.start += 1;
$scope.totalitem +=1;
}else{
$scope.start=0;
$scope.totalitem=4;
}
}
$scope.prev=function () {
if ($scope.start>0) {
$scope.start -= 1;
$scope.totalitem -=1;
}
}
$interval(moveat, 500);
function moveat() {
if ($scope.totalitem < $scope.totalnumofitem) {
$scope.start += 1;
$scope.totalitem +=1;
}else{
$scope.start=0;
$scope.totalitem=4;
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="angular-news-ticker">
<head>
<title>demo page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body ng-controller="newsCtrl">
<div class="panel panel-default">
<div class="panel-heading">
<span>news</span>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<ul>
<li ng-repeat="new in news.slice(start, totalitem)" >{{new.obj}}</li>
</ul>
</div>
</div>
</div>
<div class="panel-footer">
<ul class="pagination pull-right">
<li><span class="glyphicon glyphicon-chevron-down"></span></li>
<li><span class="glyphicon glyphicon-chevron-up"></span></li>
</ul>
</div>
</div>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
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 want to attach angular JS file to my project
<script src="js/global/angular.min.js" type="text/javascript"></script>
<script src="js/global/angular-route.min.js" type="text/javascript"></script>
However, after I did that and went to my app url http://localhost/demo3/ console throws me Error: error:modulerr, however when I opened this file via file path (file:///C:/wamp/www/demo3/index.html) there is no error...
When I followed link to angular DOCS it says that i should load angular-routes. But I even didn't start write anything yet?! I don't have any other js files loaded at this time and routes are attached anyway.
What I did wrong?
EDIT:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Demo v3</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/global/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/custom/common.css" rel="stylesheet" type="text/css"/>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body ng-app="Demo">
<div class="temp_mainFlexCont">
<div class="template_menuFlexCont" ng-controller="LeftMenuController as Menu" ng-class="{'open': Menu.isMenuOpen}">
<left-menu></left-menu>
</div>
<div class="template_contentFlexCont container-fluid">
<section class="filter_tableContainer" ng-controller="UserfilterController as User">
<div class="row clearfix">
<div class="col-xs-12">
<h1>Users</h1>
</div>
</div>
<div class="row filter_tableHeader">
<div class="col-xs-offset-1 col-xs-2">
<a class="filter_tableHeaderHref" href ng-class="{'active':User.fn_setlected_filter('f_name'), 'filter_sortDesc':User.fn_is_descending()}" ng-click="User.fn_set_sorting('f_name')">Name</a>
</div>
<div class="col-xs-2">
<a class="filter_tableHeaderHref" href ng-class="{'active':User.fn_setlected_filter('addr'), 'filter_sortDesc':User.fn_is_descending()}" ng-click="User.fn_set_sorting('addr')">Address</a>
</div>
<div class="col-xs-5">
<a class="filter_tableHeaderHref" href ng-class="{'active':User.fn_setlected_filter('desc'), 'filter_sortDesc':User.fn_is_descending()}" ng-click="User.fn_set_sorting('desc')">Description</a>
</div>
<div class="col-xs-2">
<a class="filter_tableHeaderHref" ng-class="{'active':User.fn_setlected_filter('rate'), 'filter_sortDesc':User.fn_is_descending()}" href ng-click="User.fn_set_sorting('rate')">Rating</a>
</div>
</div>
<div class="row filter_tableTbody">
<div class="col-xs-12">
<div class="row filter_tableRow" ng-repeat="user in User.obj_users">
<div class="col-xs-1">
<div class="filter_imgContainer">
<img class="img-responsive filter_avararImg" ng-src="img/avatars/{{user.img}}" alt=""/>
</div>
</div>
<div class="col-xs-2">
{{user.f_name.firstname}} {{user.f_name.lastname}}
</div>
<div class="col-xs-2">
{{user.addr.line_1}}<br>
<span class="small">{{user.addr.line_2}}</span>
</div>
<div class="col-xs-5">
<p class="filter_tableDesc">
{{user.desc}}
</p>
</div>
<div class="col-xs-2">
<span class="filter_rateStars" ng-repeat="a in User.fn_return_array_by_integer(5)| limitTo: user.rate track by $index">
★
</span>
<span class="filter_rateStars notActive" ng-repeat="a in User.fn_return_array_by_integer(5)| limitTo: 5 - user.rate track by $index">
☆
</span>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- global JS -->
<script src="js/global/angular.min.js" type="text/javascript"></script>
<script src="js/global/angular-route.min.js" type="text/javascript"></script>
<!-- custom JS -->
<script src="js/custom/common.js" type="text/javascript"></script>
<script src="js/custom/filters.js" type="text/javascript"></script>
</body>
</html>
JS Custom file
(function () {
var app = angular.module('Demo', [
'ngRoute'
]);
app.controller('TemplateController', function () {
});
app.directive('leftMenu', function () {
return{
restrict: 'E',
templateUrl: 'views/left-menu.html'
};
});
app.controller('UserfilterController', function () {
this.int_male_counter = this.int_female_counter = 5;
this.str_sort_by = {
prop_name: 'f_name',
order: 'asc'
};
this.obj_users = new Users(this.int_male_counter, this.int_female_counter).list;
this.fn_set_sorting = function (str) {
if (this.str_sort_by.prop_name === str) {
this.str_sort_by.order = this.str_sort_by.order === 'des' ? 'asc' : 'des';
} else {
this.str_sort_by.order = 'asc';
this.str_sort_by.prop_name = str;
}
this.obj_users.sortByObjKeyVal(this.str_sort_by.prop_name, this.str_sort_by.order);
};
this.fn_setlected_filter = function (str) {
return str === this.str_sort_by.prop_name;
};
this.fn_is_descending = function () {
return this.str_sort_by.order === 'des';
};
this.fn_return_array_by_integer = function (int) {
return new Array(int);
};
});
app.controller('LeftMenuController', function () {
this.isMenuOpen = true;
});
})();
Im trying to make a carousel with ui-bootstrap for angularjs, i basically copied/pasted directly from the angular docs, and it works BUT it stops working at the last slide.
It does not come back to the beggining, and the controls stop working, im not getting any errors on the console, it simply stops working
<carousel interval="myInterval">
<slide ng-repeat="slide in carousel" active="slide.active">
<img class="img-responsive" ng-src="app/assets/img/articles/{{slide.img}}" style="margin:auto;">
</slide>
</carousel>
EDIT: I have checked again And it does not stops working at the Last Slide, actually it stops at the SECOND, no matter how many elements there are.
EDIT: I made a test site just with the carousel and still is not working
This is the whole code, it stops at slide 2 and the controls stop working
<html >
<head>
<title>Radiosan Site</title>
<link rel="stylesheet" href="app/assets/lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="app/assets/lib/bootstrap/dist/css/bootstrap-theme.min.css">
<script src="app/assets/lib/jquery/jquery-2.1.0.min.js" ></script>
<script src="app/assets/lib/bootstrap/dist/js/bootstrap.min.js" ></script>
<script src="app/assets/lib/angular/angular.min.js" ></script>
<script src="app/assets/lib/angular/angular-route.min.js" ></script>
<script src="app/assets/lib/angular/angular-animate.min.js" ></script>
<script src="app/assets/lib/angular/ui-bootstrap-tpls-0.10.0.min.js"></script>
<script src="app/RadiosanApp.js" ></script>
</head>
<body ng-app="RadiosanApp">
<div class="container">
<div ng-controller="MainController">
<div style="height: 305px">
<carousel interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{$index}}</h4>
<p>{{slide.text}}</p>
</div>
</slide>
</carousel>
</div>
<div class="row">
<div class="col-md-6">
<a class="btn btn-info" ng-click="addSlide()">Add Slide</a>
</div>
<div class="col-md-6">
Interval, in milliseconds: <input type="number" class="form-control" ng-model="myInterval">
<br />Enter a negative number to stop the interval.
</div>
</div>
</div>
</div>
<script src="app/controllers/MainController.js"></script>
</body>
var app =
angular.module(
"RadiosanApp", [
"ngRoute",
"ui.bootstrap",
"ngAnimate",
"RadiosanApp.Controllers.MainController"
]);
angular.module("RadiosanApp.Controllers.MainController", [])
.controller("MainController", function($scope) {
$scope.myInterval = 5000;
var slides = $scope.slides = [];
$scope.addSlide = function() {
var newWidth = 600 + slides.length;
slides.push({
image: 'http://placekitten.com/' + newWidth + '/300',
text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +
['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
});
};
for (var i=0; i<4; i++) {
$scope.addSlide();
}
});
It's a compatibility problem between ui.bootstrap and ngAnimate .... https://github.com/angular-ui/bootstrap/issues/1350