In my AngularJS application, I have a view which displays different images in div. I want to add Navigation to view in order to Navigation to different images using my keyboard Navigation keys. Can someone please guide how to achieve that?
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS App</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/bootstrap.css">
<script type="text/javascript" src="lib/angular.js"></script>
<script type="text/javascript" src="app/myAppModel.js"></script>
<script type="text/javascript" src="app/myAppHomeCtrl.js"></script>
<script type="text/javascript" src="lib/xml2json.js"></script>
</head>
<body style="background: #800000">
<div class="container" ng-controller="myCtrl">
<input class="form-control" id="inputdefault" type="text" style="width:25%; height:40px; display:inline" ng-model="searchKey" placeholder="Type to search">
<button type="button" class="btn btn-danger" style="height:40px; margin:20px; margin-left:5px; display:inline" ng-click="loadSearch()">Search</button>
<div ng-show="true" ng-app="myApp" ng-cloak class="w3-card-2 w3-margin" style="text-align:center; color:yellow; display: grid; grid-template-columns: auto auto auto auto auto; grid-gap:20px; width:730px; border-radius: 8px;">
<div ng-repeat="x in myData" class="grid-item"><img style="border-radius: 8px;" src="{{x.logo}}" width="150" height="150">{{x.number+'. '+x.name}}</div>
</div>
</div>
</body>
</html>
This would be helpful:
var len = myData.length;
var imageIndex = 0;
$(document).keydown(function(e) {
if(imageIndex <0) {
imageIndex = 0;
}
else if(len <= imageIndex){
imageIndex = len;
}
switch(e.which) {
case 37: // left
case 40: // down
var currentImage = myData[imageIndex-1];
$("img").attr(src, currentImage.number+'. '+currentImage.name);
break;
case 39: // right
var currentImage = myData[imageIndex+1];
$("img").attr(src, currentImage.number+'. '+currentImage.name);
break;
default: return; // exit this handler for other keys
imageIndex++;
}
e.preventDefault(); // prevent the default action (scroll / move caret)
});
Related
I'm using kendo-time-picker in my angular js project. The dropdown default is blank. But, when i open the dropdown it should show 8:00 AM as a first time. How can i achieve that.
Below is my code snippet.
<input class="form-control kendotimepicker" name="StartTimeVal" kendo-time-picker
ng-model="startTimeValModel"
ng-change="startTimeChange(startTimeValModel)"
ng-required=true
ng-pattern="/^(0?[1-9]|1[012])(:[0-5]\d) [AP][M]$/"
interval="5"
title="hh:mm AM/PM">
You can use the scrollTop() function, like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
</head>
<body>
<input id="timepicker" />
<script>
$("#timepicker").kendoTimePicker({
open: function(e) {
if (!e.sender.value()) { // Run only if no value was selected
setTimeout(() => {
let containerElement = e.sender.timeView.list;
let listElement = containerElement.children().first();
containerElement.scrollTop(listElement.height() * 8 / 24)
}, 0);
}
}
});
</script>
</body>
</html>
You can use the k-value attribute and set the default value
DEMO
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.getType = function(x) {
return typeof x;
};
$scope.isDate = function(x) {
return x instanceof Date;
};
$scope.value = '08:00 AM';
})
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/datetimepicker/angular">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.default.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/angular.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div class="demo-section k-content" ng-controller="MyCtrl">
<h4>Select time:</h4>
<input kendo-time-picker="dtp"
k-value="'08:00 AM'"
ng-model="value"
style="width: 100%;" />
{{value}}
</div>
</div>
I am trying to make a filter function. Filtering is working as expected but pagination is not updating. When I click on "Mobile Phone" checkbox it shows one record in the first page, two records in second page and so on..
Also, page count is not updating according to the search result.
How to solve this?
Index.html
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<body ng-app="ngTest" ng-controller="testCtrl" ng-cloak >
<div class="container">
<div class="row">
<input type="text" ng-model="searchFilter">
<input type="checkbox" ng-click="includeType('Tablet')" >Tablet
<input type="checkbox" ng-click="includeType('Mobile Phone')" >Mobile Phone
<input type="checkbox" ng-click="includeDistrict('Galle')" >Galle
<input type="checkbox" ng-click="includeDistrict('Kandy')" >Kandy
</div>
<div class="row">
<h4>{{ads.length}} total</h4>
<div class="col-lg-12" ng-repeat="ad in filteredAds | filter:searchFilter | filter:typeFilter | filter:districtFilter" style="border:1px solid #d84530; margin-bottom:20px;">
<p >Post Id: {{ad.post_id}}<br/>
User Id: {{ad.user_id}}<br/>
District: {{ad.district}}<br/>
Town: {{ad.town}}<br/>
Brand: {{ad.brand}}<br/>
Model: {{ad.model}}<br/>
Type: {{ad.type}}<br/>
Auth: {{ad.auth}}<br/>
Condition: {{ad.condition}}<br/>
Trade: {{ad.trade}}<br/>
Price: {{ad.price}}</p>
</div>
<uib-pagination ng-model="currentPage" total-items="ads.length" items-per-page="numPerPage" max-size="maxSize" boundary-links="true"></uib-pagination>
<p>{{ads.length}} and {{maxSize}} and {{currentPage}}</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.4.js"></script>
<script src="app.js"></script>
<script src="script.js"></script>
</body>
</html>
app.js
angular.module("ngTest",['ui.bootstrap'])
script.js
(function(){
"use strict";
angular
.module("ngTest")
.controller("testCtrl",function($scope, $http){
$http.get('test.json').then(function(result){
$scope.filteredAds = [];
$scope.currentPage = 1;
$scope.numPerPage = 2;
$scope.maxSize = 5;
$scope.ads = result.data;
$scope.$watch('currentPage + numPerPage', function() {
var begin = (($scope.currentPage - 1) * $scope.numPerPage)
, end = begin + $scope.numPerPage;
$scope.filteredAds = $scope.ads.slice(begin,end);
});
$scope.typeIncludes = [];
$scope.includeType = function(type) {
var i = $.inArray(type, $scope.typeIncludes);
if (i > -1) {
$scope.typeIncludes.splice(i, 1);
} else {
$scope.typeIncludes.push(type);
}
}
$scope.typeFilter = function(ads) {
if ($scope.typeIncludes.length > 0) {
if ($.inArray(ads.type, $scope.typeIncludes) < 0)
return;
}
return ads;
}
$scope.districtIncludes = [];
$scope.includeDistrict = function(district) {
var i = $.inArray(district, $scope.districtIncludes);
if (i > -1) {
$scope.districtIncludes.splice(i, 1);
} else {
$scope.districtIncludes.push(district);
}
}
$scope.districtFilter = function(ads) {
if ($scope.districtIncludes.length > 0) {
if ($.inArray(ads.district, $scope.districtIncludes) < 0)
return;
}
return ads;
}
});
});
})();
http://plnkr.co/edit/RV6pQYMTzETZGNKdAFGb?p=preview
Perhaps it is a question of style, but I wouldn't use filters for eliminating data from a collection. I tend to process the data in the controller, or in a service, before serving it to the view.
Moreover, in my experience, it is not good to assign a new value to a watched collection: the original reference is lost and AngularJS is confused.
Therefore, I rather manipulate the original array, to insert or remove items from it.
I'm using an ons-modal to show a loading text and spinner icon when the app is fetching some data.
The code is as follows:
<ons-modal var="loadingModal">
<ons-icon icon="ion-load-c" spin="true"></ons-icon>
<br><br>
Cargando...
<br>
</ons-modal>
I can correctly show an hide it using loadingModal.show(); and loadingModal.hide();
But how would I know in Angular if it is shown or hidden?
Update
Apparently my not-so-elegant solution is not not so elegant after all :D
Here is a pull request that shows the method isShown() that should be available
soon I guess
Internally the function looks similar to whats in this answer
isShown() {
return this.style.display !== 'none';
}
Not a super elegant solution, but it works
if( $scope.loadingModal._element.css('display') == 'none'){
// hidden now
}else{
// visible now
}
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Modal | Onsen UI</title>
<link rel="stylesheet" href="https://rawgit.com/OnsenUI/OnsenUI/master/demo/styles/app.css"/>
<link rel="stylesheet" href="https://rawgit.com/OnsenUI/OnsenUI/master/build/css/onsenui.css">
<link rel="stylesheet" href="https://rawgit.com/OnsenUI/OnsenUI/master/build/css/onsen-css-components.css">
<script src="https://rawgit.com/OnsenUI/OnsenUI/master/build/js/angular/angular.js"></script>
<script src="https://rawgit.com/OnsenUI/OnsenUI/master/build/js/onsenui.js"></script>
<script src="https://rawgit.com/OnsenUI/OnsenUI/master/demo/app.js"></script>
<script>
function check($el){
return $el.css('display') === 'none' ? 'hidden' : 'visible';
}
angular.module('myApp').controller('PageController', function($scope) {
$scope.open = function() {
$scope.app.modal.show();
alert(check($scope.app.modal._element));
setTimeout(function() {
$scope.app.modal.hide();
alert(check($scope.app.modal._element));
}, 2000);
};
});
</script>
</head>
<body ng-controller="PageController">
<ons-navigator>
<ons-modal var="app.modal">
<ons-icon icon="ion-load-c" spin="true"></ons-icon>
<br><br>
Cargando...
<br>
</ons-modal>
<ons-toolbar>
<div class="center">Modal</div>
</ons-toolbar>
<p style="text-align: center">
<ons-button modifier="light" ng-click="open();">Open Modal</ons-button>
</p>
</ons-navigator>
</body>
</html>
Any one can take a look at my code? It use the ui-bootstrap carousel component. When I tried to click on one of two buttons, it updates the slides to be show, so only part of slides will be shown in the carousel... THe problem is I cannot see the carousel AT ALL sometimes (not always)... try it out... Any one can tell me why? And how to solve this issue?
My code is at: http://plnkr.co/edit/Qp8axH
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Le styles -->
<link data-require="bootstrap-css" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<style>
body {
padding-top: 60px;
}
#media (max-width: 979px) {
/* Remove any padding from the body */
body {
padding-top: 0;
}
}
</style>
<link href="style.css" rel="stylesheet" />
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
<!-- Le javascript
================================================== -->
<script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-bootstrap#*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app">
<div ng-controller="CarouselLeftCtrl" class="col-xs-6 col-md-6 shopper-left">
<div style="position:relative;clear:both">
<ul class="shopper-categories" style="list-style-type: none; float:left; padding-left:0">
<li><a data-category='cute' ng-click='emitCategoryInfo($event)' class="depstore btn btn-border" style="margin-bottom:5px; padding-left:0">Cute</a>
</li>
<li><a data-category='supercute' ng-click='emitCategoryInfo($event)' class="boutique btn btn-border" style="margin-bottom:5px; padding-left:0">Super Cute</a>
</li>
</ul>
</div>
<div style="clear:both">
======
</div>
<div class="col-md-1">clicks {{slides | json}}</div>
<div>
======
</div>
<div class="col-md-6 left-carousel">
<div>
<div style="height: 150px">
<carousel interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="{{slide.image}}" style="margin:auto;">
</slide>
</carousel>
</div>
</div>
</div>
</div>
<!-- /container -->
</body>
</html>
js:
/
/ Add your javascript here
var CarouselLeftCtrl, CarouselRightCtrl, app;
app = angular.module("app", ["ui.bootstrap"]);
CarouselLeftCtrl = function($scope, $http, $log, $timeout) {
$scope.myInterval = -1;
$scope.slides = [];
$scope.json = 0;
$http.get("shopper_images.json").then(function(result) {
var d = result.data;
for (var i = 0; i < d.length; i++) {
$scope.slides.push({
image: d[i].image,
category: d[i].category
});
}
$scope.allSlides = $scope.slides;
});
$scope.$on("category", function(event, data) {
$scope.clicks +=1;
var slides = $scope.allSlides;
var result = [];
for (var i = 0; i < slides.length; i++) {
if(slides[i].category === data.category) {
result.push(slides[i]);
}
}
$scope.slides = result;
$scope.slides[0].active = true;
$scope.$apply();
});
$scope.emitCategoryInfo = function($event) {
$scope.$emit("category", {
category: angular.element($event.target)[0].dataset.category
});
};
};
json:
[
{
"image": "http://placekitten.com/601/300", "category": "cute"
},
{
"image": "http://placekitten.com/602/300", "category": "supercute"
},
{
"image": "http://placekitten.com/603/300", "category": "cute"
}
]
Just trying to get a handle on angularJS as was building a simple little app where you can make a list of people and in the list their names are colored. The color is chosen by a select drop-down box.
The trouble is any way I try to add the new color to a style I run into trouble. At this point names get added to the list correctly, but they don't get colored correctly and I get the following error:
Error: [$parse:syntax] Syntax Error: Token 'undefined' not a primary expression at column null of the expression [{color:] starting at [{color:].
http://errors.angularjs.org/1.2.16/$parse/syntax?p0=undefined&p1=not%20a%20primary%20expression&p2=null&p3=%7Bcolor%3A&p4=%7Bcolor%3A
at http://localhost:8000/app/bower_components/angular/angular.js:78:12
at Parser.throwError (http://localhost:8000/app/bower_components/angular/angular.js:10266:11)
at Parser.primary (http://localhost:8000/app/bower_components/angular/angular.js:10239:14)
at Parser.unary (http://localhost:8000/app/bower_components/angular/angular.js:10492:19)
at Parser.multiplicative (http://localhost:8000/app/bower_components/angular/angular.js:10475:21)
at Parser.additive (http://localhost:8000/app/bower_components/angular/angular.js:10466:21)
at Parser.relational (http://localhost:8000/app/bower_components/angular/angular.js:10457:21)
at Parser.equality (http://localhost:8000/app/bower_components/angular/angular.js:10448:21)
at Parser.logicalAND (http://localhost:8000/app/bower_components/angular/angular.js:10439:21)
at Parser.logicalOR (http://localhost:8000/app/bower_components/angular/angular.js:10427:21) <li ng-repeat="player in players" ng-style="{color:" "stylecolor(player)"}="" class="ng-scope ng-binding">
Which I think means player.color is coming back null? If there is a way to do this without the function call that would be preferable I was just trying emulate this solution:
dynamically adding directives in ng-repeat
Here is my html:
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Scratch Snake</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
<link rel="stylesheet" href="css/app.css"/>
<script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"> </script>
<!-- Bootstrap files -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<script src="bower_components/jquery/dist/jquery.js"> </script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
</head>
<body ng-controller = "PlayerAdditionCtrl">
<ul class="list-group">Players:
<li ng-repeat="player in players" ng-style = {color: "styleColor(player)"} > {{player.name}} </li>
</ul>
<div id="playerEntry">
<p>
<label for="playername">Name: </label><input id="playername" class="form-control" type="text" name="playername" ng-model="playername">
<select id="playerColor" ng-model="playercolor">
<option value="#f00">Red</option>
<option value="#00f">Blue</option>
<option value="#0f0">Green</option>
<option value="#ff0">Yellow</option>
</select>
</p>
<button type="button" class = "btn btn-primary" id="addPlayerBtn" ng-click="addPlayer()">Add Player</button>
<button type="button" class = "btn btn-success" id="doneBtn" onclick="moveToGame();">All Done!</button>
<button type="button" class = "btn btn-info" id="defaultsBtn" onclick="loadDefaults();">Load Defaults</button>
<br>
</div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
And my controller:
'use strict';
/* Controllers */
angular.module('myApp.controllers', [])
.controller('PlayerAdditionCtrl', ['$scope', function($scope) {
$scope.players = [];
//add a player
$scope.addPlayer = function()
{
$scope.players.push(
{
name: $scope.playername,
color: $scope.playercolor
});
}
$scope.styleColor = function (player)
{
return { color: player.color }
}
}]);
remove
$scope.styleColor() in your controller
change
<li ng-repeat="player in players" ng-style = {color: "styleColor(player)"} > {{player.name}} </li>
to
<li ng-repeat="player in players" ng-style="{color: player.color}" > {{player.name}} </li>
Change
<li ng-repeat="player in players" ng-style = {color: "styleColor(player)"} > {{player.name}} </li>
to
<li ng-repeat="player in players" style="color: {{player.color}};"> {{player.name}} </li>
If you stick with ng-style, two-way data binding will update every player to the selected color. Without using angular.copy, changing your data structure, or doing something else to break two-way data binding, it won't be possible to have players be different colors.
Here's a working Plunker example: http://plnkr.co/edit/wEpKzN?p=preview