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"
}
]
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 can not create complex data models in my controllers.
every time I create them the code seems to fail silently
simple data models like
$scope.conversationList = [123456];
work just fine both using ng-bind & using it in a directive template.
but the moment I change them to {{conversationList.conversation}} they fail silently and my ngbind is emptied and the template displays
"{{conversationList.conversataion}}" in plain text.
I don't know what is wrong. Every example I can find looks like I formatted the models correctly it keeps failing.
Thank you for your help
Controller
/* global angular */
'use strict';
app.controller('conversationListCtrl', ['$scope', function ($scope) {
$scope.conversationList = [
{
conversation2: 123456789,
conversation:
{
id: "bestbuy",
messageId: 123456,
subscriber: "Billy Madison",
subscriptionType: "summerPass",
conversationImage: "insert Image"
}
}
]
}
])
.directive('listCtrl', function () {
return {
scope: false,
template: '<div> {{conversationList.conversation}} </div>'
}
});
Index.html
<!doctype html>
<html ng-app="ChatApp" class="angularjs ng-scope">
<head>
<meta charset="utf-8">
<title>ClearKey Test Message</title>
<meta name="description" content="Layer Angular example">
<link rel="shortcut icon" href="http://static.layer.com/web/favicon.png">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Raleway:300,400" rel="stylesheet" type="text/css">
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Common CSS and Identity dialog -->
<link href="common/style.css" rel="stylesheet">
<!-- Layer Web SDK -->
<script src='vendors/layer-websdk.min.js'></script>
<script src='vendors/angular.js'>
//checked
</script>
<script src='vendors/angular-route.js'>
</script>
<script src='vendors/ng-infinite-scroll.min.js'></script>
<script src='vendors/stop-angular-overrides.js'></script>
<!-- Angular app -->
<script src='js/app.js'></script>
<script src="jquery-3.1.1.min.js"></script>
<script src="js/models/conversation.js"></script>
</head>
<body class="ng-scope" cz-shortcut-listen="true">
<!-- ^^^used to have appCtrl^^^ -->
<div class="main-app" ng-include="'views/app.html'"></div>
</body>
</html>
App.html
<div src="jquery-3.1.1.min.js">
<!-- ^^^needs appctrl controller^^^ -->
<div class="messenger">
<div class="left-panel">
<div class="Message-item">
<div class="imgContainer"> <img class="cornerImage" src="images/favicon.png" /> </div>
</div>
<div >
<!-- ^^^had the conversationListCtrl^^^ -->
<div class="panel-header conversations-header"
>
<!-- ^^^had the partials for the left column header^^^ -->
</div>
<div ng-controller="conversationListCtrl" class="conversation-list">
<div list-Ctrl ></div>
<div ng-model="conversationList" class="conversation-list" style="border:dashed" ng-bind="{{conversationList.conversation}}"></div>
</div>
<!-- had the partials for conversationlist.html -->
</div>
</div>
<div class="right-panel" >
<div
>
<!-- had the partials for the messages that were in each conversation -->
</div>
</div>
</div>
</div>
You need to define element which you want to access -
Replace - {{conversationList.conversation}}
With - {{conversationList.conversation.id}} or {{conversationList.conversation.messageId}}
I'm doing a single page application using AngularJS. On my index.html I'm using an ng-view direction to show the header section. The navigation section is defined as a ul element with a bunch of li elements that represents navigation links. I have a ng-class on each li element that needs to set the class to active. Based on my code, it does, but it doesn't appear on the page until after I click on the page. Provided is my code, please help. Thank you in advance
index.html
<!DOCTYPE html>
<html lang="en">
<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>Bootstrap 1 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/font-awesome.css" />
<link rel="stylesheet" href="js/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/isotope.css" media="screen" />
<link rel="stylesheet" href="css/style.css">
<!-- HTML5 Shim and Respond.js 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]-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="appMod">
<!-- Start: Header -->
<div ng-include="'templates/header.html'"></div>
<!-- End: Header -->
<!-- Start: Content -->
<div ng-view></div>
<!-- End: Content -->
<!-- Start: Footer -->
<div ng-include="'templates/footer.html'"></div>
<!-- End: Footer -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/fancybox/jquery.fancybox.pack.js"></script>
<script src="js/wow.min.js"></script>
<!-- Vendor: Angular, followed by our custom Javascripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-route.min.js"></script>
<!-- parent angular module and controller that supports SPA (Single Page Application) -->
<script src="app/appMod.js"></script>
<script src="templates/TemplateCtrl.js"></script>
<script src="app/home/HomeCtrl.js"></script>
<script src="app/blog/BlogCtrl.js"></script>
<script src="js/functions.js"></script>
</body>
</html>
templates/header.html
<header >
<div class="main-menu" >
<div class="container">
<div class="row">
<div class="col-md-4">
<h1><a class="navbar-brand" href="index.html" data-0="line-height:90px;" data-300="line-height:50px;"> Hidayah
</a></h1>
</div>
<div class="col-md-8">
<div class="dropdown">
<ul class="nav nav-pills" ng-controller="TemplateHeadCtrl">
<li ng-repeat="NavLink in NavLinks" ng-class="IsSelected(NavLink)">
{{NavLink.LinkTitle}}
</li>
<!-- <li id='liHome' class="active"></li>
<li id='liPortfolio'>Portfolio</li>
<li id='liBlog'>Blog</li>
<li id='liContact'>Contact</li>-->
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
templates/TemplateCtrl.js
app.controller("TemplateHeadCtrl", ['$scope','$http', function($scope,$http){
$scope.NavLinks = [
{
"LinkTitle": "Home",
"LinkURL": "#/",
"LinkID": "liHome"
},
{
"LinkTitle": "Portfolio",
"LinkURL": "#Portfolio",
"LinkID": "liPortfolio"
},
{
"LinkTitle": "Blog",
"LinkURL": "#Blog",
"LinkID": "liBlog"
},
{
"LinkTitle": "Contact",
"LinkURL": "#Contact",
"LinkID": "liContact"
},
{
"LinkTitle": "Contact1",
"LinkURL": "#Contact1",
"LinkID": "liContact1"
}
];
/*
$scope.NavLinks = function () {
alert("here")
return $http.get('/NavLinks.json').then(function (response) {
alert("here")
return response.data;
}).catch(function (fallback) {
alert("Oops an error has occured. ")
});
};*/
$scope.SetMaster = function(section){
$scope.SelectedSection = section;
};
$scope.IsSelected = function(section){
return $scope.SelectedSection === section? 'active': '';
};
}]);
Also for some reason the $scope.NavLinks function does not work either. I have it commented it out in my code. The NavLinks.json is located under the same folder of TemplateCtrl.js
$scope.NavLinks = function () {
alert("here")
return $http.get('/NavLinks.json').then(function (response) {
alert("here")
return response.data;
}).catch(function (fallback) {
alert("Oops an error has occured. ")
});
};
Make change in 'templates/header.html' like this:
<li ng-repeat="NavLink in NavLinks" ng-class="{active : IsSelected(NavLink)}">
{{NavLink.LinkTitle}}
</li>
And in 'templates/TemplateCtrl.js':
$scope.IsSelected = function(section){
return $scope.SelectedSection.LinkID == section.LinkID;
};
Is there a way i can reset the value of kendo slider once it is changed.
Please see this example code: http://dojo.telerik.com/AKOhe/6
entire code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.material.min.css" />
<script src="http://cdn.kendostatic.com/2015.2.624/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<input k-ng-model="width" kendo-slider />
</div>
<button k-ng-click="onClick()" />
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.width = 3;
$scope.onClick= function(){
$scope.width = 2;
};
})
</script>
</body>
</html>
How can i reset value of kendo slider on reset button?
Thanks in advance.
It is not working because you place the button outside of the controller scope, your code already correct. Try it like
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.material.min.css" />
<script src="http://cdn.kendostatic.com/2015.2.624/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl" style="margin-bottom:20px;">
<input k-ng-model="width" kendo-slider="slider" />
<button ng-click="onClick()"> reset</button>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.width = 3;
$scope.onClick= function(){
$scope.width = 2;
};
})
</script>
</body>
</html>
I'm trying to have a slideshow and carousel in child template in angularjs, but as they loads, they doesn't work. I found that it's because the javascript wouldn't execute, how should I resolve this?
<!doctype html>
<html class="no-js" lang="" ng-app="tte" ng-controller="GeneralCtrl">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>{{Page.Title}}</title>
<link rel="stylesheet" href="/media/css/bootstrap.min.css">
<link rel="stylesheet" href="/media/css/swiper.min.css">
<link rel="stylesheet" href="/media/css/owl.carousel.css">
<link href="/media/css/nprogress.css" rel="stylesheet">
<link rel="stylesheet" href="/media/css/style.css">
<script type="text/javascript" src="/media/js/angular.js"></script>
<script type="text/javascript" src="/media/js/ng-device-detector.js"></script>
<script type="text/javascript" src="/media/js/re-tree.js"></script>
<script type="text/javascript" src="/media/js/angular-route.js"></script>
<script type="text/javascript" src="/media/js/angular-md5.js"></script>
<script type="text/javascript" src="/media/js/angular-cache.js"></script>
<script src="/media/js/vendor/modernizr-2.8.3.min.js"></script>
<script type="text/javascript" src="/media/js/app.js"></script
</head>
<body>
<ul id="menu-main">
<li class="logged-in"><img src="./media/img/general/profile.png" alt="text" width="75" height="75" id="profileImage" class="img-responsive img-circle center-block"></li>
</ul>
<div ng-view></div>
<script src="/media/js/vendor/swiper.min.js"></script>
<script src="/media/js/vendor/owl.carousel.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
//pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
autoplay: 2500,
autoplayDisableOnInteraction: false,
//mousewheelControl: true,
keyboardControl: true
});
$('.owl-carousel').owlCarousel({
rtl:true,
loop:false,
margin:10,
nav:true,
dots:false,
margin:30,
merge:true,
slideBy:4,
responsive:{
0:{
items:2
},
768:{
items:3
},
992:{
items:4
}
}
})
$('.owl-carousel .owl-controls .owl-nav .owl-prev').html('<span class="glyphicon glyphicon-menu-right"></span>');
$('.owl-carousel .owl-controls .owl-nav .owl-next').html('<span class="glyphicon glyphicon-menu-left"></span>');
</script>
</body>
</html>
and the child page is :
<header id="header">
<div class="swiper-container rtl">
<div class="swiper-wrapper">
<div ng-repeat="Slider in hmc.Sliders" class="swiper-slide" style="background-image:url(/media/img/test.gif)">
<div class="slide-title">
<h2>test</h2>
<h1>test<span>test ttitle</span></h1>
test </div>
</div>
<!--<div class="swiper-slide" >Slide 2</div>
<div class="swiper-slide" >Slide 3</div>
<div class="swiper-slide" >Slide 4</div> -->
</div>
<!-- Add Pagination -->
<!--<div class="swiper-pagination"></div>-->
<div class="icon-arrow-down" id="swiper-button-down"></div>
<!-- Add Navigation -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</header>
when it's loads to the page the angular ng-repeat do it's job and repeat items it it should but it's not rendered