I am trying to show silder using ng-repeat. But picture and other things in controller don't appear.
Here is my js code
angular.module('starter', [])
.controller('slider', function($scope) {
$(document).ready(function(){
$('.slider').slider({full_width: true});
});
$scope.pictures=[
{
img:"http://www.brics-info.org/wp-content/uploads/2015/08/Transmission-Lines.jpg,
info:"Эрчим хүчний барилга угсралт",
desc:"Засвар, тестчилэл"
},
{
img:"http://www.burns-group.com/images/uploads/projects/Amtrak-Zoo-Transmission-Line-3.jpg",
info:"Эрчим хүчний барилга угсралт",
desc:"Засвар, тестчилэл"
},
{
img:"http://www.sgceng.com/snp_lib/showpic.php?recordID=630×tamp=1204139644&table=sgcengco",
info:"Эрчим хүчний барилга угсралт",
desc:"Засвар, тестчилэл"
}
] ;
})
This is index.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<div class="slider" ng-app="starter" ng-controller="slider">
<ul class="slides">
<li ng-repeat="picture in pictures">
<img ng-src="{{picture.img}}"> <!-- image -->
<div class="caption center-align">
<h3 class="black-text">{{picture.info}}</h3>
<h5 class="blue blue-text text-lighten-4">{{picture.desc}}</h5>
</div>
</li>
</ul>
</div><!--slider-->
why it doesn't appear?
You should include controller in your index.html page. and use ng-app="moduleName" and use ng-controller="yourController". say script.js your controller file.
<!DOCTYPE html>
<html data-ng-app='starter'> /* used your module name as ng-app name */
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="angular.js#1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script> /* load your controller file */
</head>
<body ng-controller="slider"> /* use your controller */
<h1>Hello Plunker!</h1>
<div class="slider">
<ul class="slides">{{pictures}}
<li ng-repeat="picture in pictures">
<img ng-src="{{picture.img}}"> <!-- image -->
<div class="caption center-align">
<h3 class="black-text">{{picture.info}}</h3>
<h5 class="blue blue-text text-lighten-4">{{picture.desc}}</h5>
</div>
</li>
</ul>
</div>
</body>
</html>
PLUNKER Demo Link
Related
i have a project formed by html, js, bootstrap, angularjs.
my site have many pages that all pages have a template.
now, i think header ,navigation , footer and etc isn't reusable and i should write those any time.
example in JSF :
<ui:composition template="/WEB-INF/template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<ui:define name="title">
New page title here
</ui:define>
<ui:define name="content">
<h1>New content here</h1>
<p>Blah blah</p>
</ui:define>
</ui:composition>
I do not know if I can use Angular to do this.
Thank you for any help you receive.
this is sample of my page:
<!DOCTYPE html>
<html lang="en" >
<head>
<title>main template</title>
<meta charset="utf-8">
<link href="font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
...
<link rel="stylesheet" type="text/css" href="app/styles/bootstrap4/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="app/styles/responsive.css">
...
</head>
<body>
<script src="app/js/jquery-3.2.1.min.js"></script>
<script src="app/styles/bootstrap4/bootstrap.min.js"></script>
....
<div class="super_container" ng-controller="showcaseController">
<!-- Header -->
<header class="header trans_300">
<!-- Top Navigation -->
<div class="top_nav">
<div class="container">
....
</div>
</div>
<!-- Main Navigation -->
<div class="main_nav_container">
<div class="container">
<div class="row">
....
</div>
</div>
</div>
</header>
//content of page like this
<div include-html="queryManagement.html"></div> // <<---- url clicked
</div>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/elasticsearch/elasticsearch.angular.js"></script>
<script src="app/apps/app.js"></script>
.....
</body>
</html>
tip:
Pages are clicked on the bar, and they look like they are on the page.
But in any case, the layout page is loaded as a main page, which opens
the content of the selected page within itself.
i found solution with angularjs.
in layout page:
<html lang="en" ng-app="FirstPage">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="app/styles/bootstrap4/bootstrap.min.css">
....
</head>
<body>
<script src="app/styles/bootstrap4/bootstrap.min.js"></script>
.....
<div class="super_container" ng-controller="layout">
<!-- Header -->
<header class="header trans_300">
<!-- Top Navigation -->
<div class="top_nav">
<div class="container">
......
<nav class="navbar">
<ul class="navbar_menu">
look ng-click <li>link 1</li>
look ng-click <li>link 2</li>
</ul>
</div>
</nav>
....
</div>
</div>
</header>
<!--<div ng-bind-html="contentUri"/>-->
<div id="ext-content" ng-include="contentUri"/> //<== use ng-include for content
</div>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script src="app/apps/app.js"></script>
....
</body>
</html>
and then in js:
app.controller("layout", function ($scope, client, esFactory) {
$scope.contentUri = '';
$scope.loadContent = function (uri) {
$scope.contentUri = uri;
}
});
this worked for me
I am new to javascript and am having a hard time using it to manipulate my html elements.
Right now I have an array of images in my javascript file.
I am trying to only display the id of my img if it matches the nav bar's list item.
Here is my javascript file :
(function() {
var app = angular.module('myContent',[]);
app.controller('ContentController',function($scope) {
$scope.img=[
{id:'TOPS',source:'images/top1.jpg'},
{id:'TOPS',source:'images/top2.jpg'},
{id:'TOPS',source:'images/top3.jpg'},
{id:'TOPS',source:'images/top4.jpg'},
{id:'SHOES',source:'images/shoe1.jpg'},
{id:'SHOES',source:'images/shoe2.jpg'},
{id:'SHOES',source:'images/shoe3.jpg'},
{id:'SHOES',source:'images/shoe4.jpg'}
];
});
})();
Here is my html file :
<!DOCTYPE html>
<html lang="en" ng-app="myContent">
<head>
<meta charset="UTF-8">
<title>ShopME Tops</title>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js
"></script>
<script type="text/javascript" src="myscript.js"></script>
</head>
<body>
<header>
<div class="header-inner2">
<nav>
<ul class="center">
<li>SWIMWEAR</li>
<li>TOPS</li>
<li>BOTTOMS</li>
<li>DRESSES</li>
<li>SHOES</li>
<li>ACCESSORIES</li>
</ul>
</nav>
</div>
</header>
<!-- Container for grid layout -->
<div class="container" ng-controller="ContentController">
<div class="row">
<div class="col" ng-repeat="x in img">
<a ng-href="{{x.link}}" target="_blank">
<img class="img-responsive1" ng-src="{{x.source}}" alt="#">
</a>
</div>
</div>
</div>
Is there anyway to compare the list item to the img.id?
You can pass the value to a function and use filter to filter the values,like below
$scope.getData = function(value){
$scope.filtered = $scope.img.filter(test=>test.id == value);
}
DEMO
(function() {
var app = angular.module('myContent',[]);
app.controller('ContentController',function($scope) {
$scope.filteted = [];
$scope.img=[
{id:'TOPS',source:'images/top1.jpg'},
{id:'TOPS',source:'images/top2.jpg'},
{id:'TOPS',source:'images/top3.jpg'},
{id:'TOPS',source:'images/top4.jpg'},
{id:'SHOES',source:'images/shoe1.jpg'},
{id:'SHOES',source:'images/shoe2.jpg'},
{id:'SHOES',source:'images/shoe3.jpg'},
{id:'SHOES',source:'images/shoe4.jpg'}
];
$scope.getData = function(value){
$scope.filtered = $scope.img.filter(test=>test.id == value);
}
});
})();
<!DOCTYPE html>
<html lang="en" ng-app="myContent">
<head>
<meta charset="UTF-8">
<title>ShopME Tops</title>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js
"></script>
<script type="text/javascript" src="myscript.js"></script>
</head>
<body>
<div ng-controller="ContentController" class="header-inner2">
<nav>
<ul class="center">
<li><a ng-click="getData('SWIMWEAR')" >SWIMWEAR</a></li>
<li><a ng-click="getData('TOPS')">TOPS</a></li>
<li><a ng-click="getData('BOTTOMS')">BOTTOMS</a></li>
<li><a ng-click="getData('DRESSES')">DRESSES</a></li>
<li><a ng-click="getData('SHOES')">SHOES</a></li>
<li><a ng-click="getData('ACCESSORIES')">ACCESSORIES</a></li>
</ul>
</nav>
<!-- Container for grid layout -->
<div class="container">
<div class="row">
<div class="col" ng-repeat="x in filtered">
<a ng-href="{{x.link}}" target="_blank">
<img class="img-responsive1" ng-src="{{x.source}}" alt="#">
</a>
</div>
</div>
</div>
</div>
It doesn't display anything on view nor any error on console log. Have checked with case sensitives too still couldn't solve the problem. Saw other posts too still couldn't find where am making mistake. Is it necessary to use ng-resource for UI-Router?
<!DOCTYPE html>
<html>
<head>
<title>Fad Street Den</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-alpha.4/angular-ui-router.js"></script>
<body cz-shortcut-listen="true">
<div>
{{name}}
<div ui-view="header"></div>
<div ui-view="content"></div>
</div>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controller.js"></script>
<script type="text/javascript" src="services.js"></script>
</body>
</html>
App.js file
var app=angular.module('myApp', ['ui.router']);
.config(function($stateProvider,$urlRouterProvider)
{
$stateProvider
.state('home',
{
url:'/',
views:
{
'header':
{
templateUrl:"header.html"
},
'content':
{
templateUrl:"body.html",
controller:"productscontroller"
}
}
})
$urlRouterProvider.otherwise('/');
})
Controller.js File
var app=angular.module('myApp');
app.controller('productscontroller',
['$scope','productservice',function($scope,productservice)
{
$scope.name="kannan";
productservice.productlists().then(function(response)
{
$scope.ans=response.data;
console.log($scope.ans);
},function(response)
{
console.log(response.status);
return response.status;
});
}]);
Header.html
<body ng-app="myApp" ng-controller="productscontroller">
<ul class="nav navbar-nav">
<li class="active"><a ui-sref="home">Home</a></li>
<li><a ui-sref="home">Home</a></li>
</ul>
</body>
Body.html
<body ng-app="myApp" ng-controller="productscontroller">
<div>
<div style="height: 200px;" ng-repeat="x in ans">
<img style="width: 100px;height: 100px;float: left;" class="img-responsive"
ng-src="{{x.imageURL1}}">
<h1>{{x.color}}</h1>
<p>{{x.brand}}</p>
<p>{{x.gender}}</p>
</div>
</div>
</body>
We have to provide ng-app="myApp" at the most root level possible. Mostly on the index.html
<body ng-app="myApp" ...
or even on the <html> (e.g. to be able to adjust <title> which is part of <head>)
<html ng-app="myApp" ...
the header.html and body.html (as shown above) would not work, because that would not trigger the application at all
i tried many time to run this code but every time it appear in a bad manner i want angular make its affect like this demo http://wowslider.com/angular-slider-collage-demo.html. please help me i tried many time without good result.can you put aworked link to this demo
Blockquote
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>Http://wowslider.net/</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Made with WOW Slider - Create beautiful, responsive image sliders in a few clicks. Awesome skins and animations. Http://wowslider.net/" />
<!-- Start WOWSlider.com HEAD section --> <!-- add to the <head> of your page -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
</head>
<body style="background-color:#d7d7d7;margin:0" >
<!-- Start WOWSlider.com BODY section --> <!-- add to the <body> of your page -->
<div id="wowslider-container1" >
<div class="ws_images" ng-controller="HelloController">
<ul>
<li ng-repeat="img in allimages"><img ng-src="data1/images/{{img.name}}" alt="2016-chevrolet-cruze-spied-completely-uncovered-news-car-and-driver-photo-658949-s-217x132" title="2016-chevrolet-cruze-spied-completely-uncovered-news-car-and-driver-photo-658949-s-217x132" id="wows1_0"/></li>
</ul>
</div>
<div class="ws_bullets">
<div>
<a ng-repeat="img in allimages" href="#" title="2016-chevrolet-cruze-spied-completely-uncovered-news-car-and-driver-photo-658949-s-217x132"><span><img ng-src="data1/tooltips/{{img.name}}" alt="2016-chevrolet-cruze-spied-completely-uncovered-news-car-and-driver-photo-658949-s-217x132"/>1</span></a>
</div>
</div>
<div class="ws_script" style="position:absolute;left:-99%">http://wowslider.net/ by WOWSlider.com v8.7</div>
<div class="ws_shadow"></div>
</div>
<!-- End WOWSlider.com BODY section -->
<script type="text/javascript" src="engine1/angular.js"></script>
<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.allimages = [{name:'2016chevroletcruzespiedcompletelyuncoverednewscaranddriverphoto658949s217x132.jpg'},{name:'2016chrysler300srtspieditsalivenewscaranddriverphoto658864s217x132.jpg'}];
});
</script>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
</body>
</html>
I wrote a jQuery code that have all the pages code in one html file and I wanted to add a slider in the left side that will show the pages on.
It works in the home page but it's not working for the other pages? Nevertheless the code is similar. I don't know what to change or add to make working for all of the pages.
My HTML header:
<head>
<meta charset="utf-8">
<title>WELCOME</title>
<link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jquery.sidr.dark.css">
<script>
$(document).ready(function(){
{$(".p1").hide()};
$("#hide1").click(function(){
$(".p1").hide();
});
$("#show1").click(function(){
$(".p1").show();
});
});
</script>
<script>
$(document).ready(function(){
{$(".p2").hide()};
$("#hide2").click(function(){
$(".p2").hide();
});
$("#show2").click(function(){
$(".p2").show();
});
});
</script>
<script>
$(document).ready(function(){
{$(".p3").hide()};
$("#hide3").click(function(){
$(".p3").hide();
});
$("#show3").click(function(){
$(".p3").show();
});
});
</script>
<script>
$(document).ready(function() {
$('#simple-menu1').sidr();
});
</script>
<script>
$(document).ready(function() {
$('#simple-menu2').sidr();
});
</script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/mobile.css" />
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
</head>
And here is the home page slider (the one that works):
<!-- Home Page -->
<div data-role="page" id="page">
<!-- Header -->
<div data-role="header">
<div id="s-image"><a id="simple-menu1" href="#sidr"><img class="header-image" src="images/sort.png" alt="Sort By" heigh="35" width="35"></a> </div>
<div id="sidr">
<!-- Your content -->
<ul class="center my-font">
<li>
Page 1
</li>
<li class="active">
Page 2
</li>
<li>
Page 3
</li>
</ul>
</div>
<h1 class="my-font"> Welcome to the home page</h1>
</div>
Here is the code for the slider for the one of the pages (It didn't work):
<!-- Page (2) -->
<div data-role="page" id="page">
<!-- Header -->
<div data-role="header">
<div id="s-image"><a id="simple-menu1" href="#sidr"><img class="header-image" src="images/sort.png" alt="Sort By" heigh="35" width="35"></a> </div>
<div id="sidr">
<!-- Your content -->
<ul class="center my-font">
<li>
Page 1
</li>
<li class="active">
Page 2
</li>
<li>
Page 3
</li>
</ul>
</div>
<h1 class="my-font"> Welcome to the home page</h1>
</div>
Have you try to replace $ with jQuery . Or either you can check error on console .