Compare list items to $scope variables - javascript

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>

Related

how can i get the url of the content( home.html) in adress bar by jquery load() function?

I am using jquery load() function to load content to a container of the index page. the page was loaded but the URI of content is not displaying in the address bar.
how can I get the URL of the content( home.html) in the address bar?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-grid.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link rel="stylesheet" href="css/bootstrap-reboot.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.bundle.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/carousel.js"></script>
<script src="js/larelapa.js"></script>
<script
$(function() {
$("#home").click(function() {
$('#container').load('home.html');
});
});
$(function() {
$("#about").click(function() {
$('#container').load('about.html');
});
});
$(function() {
$("#contact").click(function() {
$('#container').load('contact.html');
});
});
$(function() {
$("#policy").click(function() {
$('#container').load('policy.html');
});
});
</script>
</head>
<body id="bg">
<a id="home" href="#" class="w3-bar-item w3-button w3-hover-white btn-block" onclick="w3_close()">Home</a>
</div>
<div style="position: absolute; bottom: 0;">
<li> <a id="about" href="#" onclick="w3_close()">About us</a></li>
<li><a id="contact" href="#" onclick="w3_close()">Contact Us</a></li>
<li> <a id="policy" href="#" onclick="w3_close()">Policy</a></li>
</div>
</nav>
<div id="container"></div>
</div>
</body>
</html>
home.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container-fluid row">
</div>
</div>
</body>
</html>
after clicking the home button the home.html loaded in the container of the index.html and URL shows http://localhost:63342/code/index.html# which I want to be http://localhost:63342/code/index.html?home that I can bookmark.
I am a newbie to javascript.

You need to use
history.pushState(stateObject, "title", URL);
it would look like this:
$(function() {
$("#home").click(function() {
$('#container').load('home.html');
window.history.pushState({url: "home.html"}, "", "home.html");
});
});
But instead of making one jquery event for every pages you should make it reusable so you only have one code to maintain.
https://jsfiddle.net/fJ9wq/
By the way, you opening script tag is not closed

how to include html content in main page content location (pure html or use with angularjs)

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

Redirect to a respective single product page on click in angular UI router

In my home page i will fetch all the products which i get from JSON now if i click a particular product image it should redirect to another page where the respective product alone should display. I know that changes should be made at singleproductcontroller but i don't know how. Here is my json link
JSon link
<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']);
app.config(function($stateProvider,$urlRouterProvider)
{
$stateProvider
.state('home',
{
url:'/',
views:
{
'header':
{
templateUrl:"header.html"
},
'content':
{
templateUrl:"body.html",
controller:"productscontroller"
}
}
})
.state('home.product',
{
url:'products/:id',
views:
{
'content#':
{
templateUrl:"product.html",
controller:"singleproductcontroller"
}
}
})
$urlRouterProvider.otherwise('/');
})
Controller.JS
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;
});
}]);
app.controller('singleproductcontroller', ['$scope','$stateParams','productservice',function($scope,$stateParams,productse rvice)
{
productservice.productlists().then(function(response)
{
console.log($stateParams.id);
var id=$stateParams.id;
$scope.fullproducts=response.data;
console.log($scope.fullproducts=response.data[$stateParams.id])
$scope.products=$scope.fullproducts[$stateParams.id]
console.log($scope.products);
},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>
Product.html
<body ng-controller="singleproductcontroller">
<div>
<div style="height: 200px;">
<img style="width: 100px;height: 100px;float: left;" class="img-responsive" ng-src="{{x.imageURL1}}">
<h1>{{products.color}}</h1>
<p>{{products.brand}}</p>
<p>{{products.gender}}</p>
</div>
</div>
</body>

You should add the ui-sref directive to the image. It will bring you to the product state. Somthing like this:
<div ng-repeat="x in ans">
<a ui-sref="home.product({id: x.id})"><img ></a>
<div>

Angular JS UI-Router not working

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

Things in controller doesn't appear using AngularJS

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&timestamp=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

Categories

Resources