All:
What I want to do is add a key listener to control a menu toggle on the page.
<body ng-controller="main" ng-keydown="toggleSideBar($event)">
In main controller:
$scope.sidebarOpen = false;
$scope.toggleSideBar = function(e){
if(e.keyCode == 18){ // 'ALT' key
$scope.sidebarOpen = !$scope.sidebarOpen;
}
}
In the template:
.sidebar {
left:100px;
transition: left 0.5s;
}
.sidebar.open {
left:0px;
transition: left 0.5s;
}
<div class="sidebar" ng-class="{'open': sidebarOpen}">
When I press ALT key, every other time, it can response, I am not sure what happens, any help?
UPDATE
Later on, I find what wrong with this:
This is a specific case(when u hit ALT), the Chrome will use ALT as shortcut to toggle focus on its customize setting button:
That is why every other time, my key down can be responded. So, now the question becomes: How to bypass this?
Thanks
Works fine for me, do you have any browser constraint here and also can you update the fiddle.
<div ng-app>
<h2>Example</h2>
<div ng-controller="myController">
<input ng-keydown="keypress($event)">
<p>key: {{lastKey}}</p>
<div ng-keydown="keypress($event)">
</div>
</div>
</div>
JS Code:
function myController($scope) {
$scope.lastKey = "---"
$scope.keypress = function(e) {
if(e.keyCode === 18){ // 'ALT' key
//$scope.sidebarOpen = !$scope.sidebarOpen;
$scope.lastKey = e.keyCode
}
};
}
http://jsfiddle.net/7tyf64dp/
Related
I have created a pagination example dynamically in angular. Now ng-click event works fine with ng-repeat. when I click on any row element I styled it dynamically using ng-style(with red border). After that if I click on collapse button the selected row collapses. Now I want this selection to inherit to every first row element with border red without clicking it by default on pageload. just by directly clicking on collapse button, the first row should collapse just like how ng-click is working for every row. when I click on prev, next buttons in both gold and silver links how can I make this work only for every first element selected with red border & be also able to work with collapse button to it. do I have to use data-ng-init="";? Any help would be grateful. I have my plunkr link demo below including json file
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
body{background:#fff;height:100%}h2{text-transform:capitalize;font-size:14px;color:#636363;font-weight:700}.small{width:100%;text-align:left;float:left;background:#efefef;line-height:50px;border-bottom:1px solid #bfbfbf}#btns{float:right;z-index:0;position:relative}#gold,#hide,#leftBtn,#rightBtn,#silver{width:auto;min-width:48px;height:48px;border:none;outline:0;float:left;border-radius:7px;margin:10px 10px 10px 0}#hide{margin:10px 0}#rightBtn{float:right}#gold,#silver{background:pink}.link{color:#2196F3;cursor:pointer}button[disabled],html input[disabled]{cursor:default;opacity:.4}div.caption{font-family:Oswald,sans-serif;color:#000;text-transform:uppercase;font-size:15px;margin:0;float:left}
</style>
<div ng-app="myApp" ng-controller="tabCtrl">
<div class="col-md-12" id="main">
<div class="row">
<button id="gold" class="active" ng-click="gold()">gold</button>
<button id="silver" class="" ng-click="silver()">silver</button>
<button id="hide" ng-click="hide()" class="pull-right"> collapse </button>
<div class="small" ng-repeat="x in myData | startFrom:(currentPage)*pageSize | limitTo:pageSize" ng-click="setActive(x, $event)" ng-style="activeMenu === x && divStyle">
<h2 class="col-md-4 pull-left"> {{ x.caption }} </h2>
<div class="col-md-4 pull-left"> {{ x.description }} </div>
<div class="col-md-4 link text-right">view site</div>
</div>
</div>
<!--previous, next buttons-->
<div id="btns">
<button id="rightBtn" ng-disabled="currentPage >= myData.length/pageSize - 1" ng-click="currentPage=currentPage+1;">next</button>
<button id="leftBtn" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">prev</button>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('tabCtrl', function ($scope, $http, $timeout) {
$scope.currentPage = 0;
$scope.pageSize = 5;
$scope.myData = [];
for (var i = 0; i < $scope.myData; i++) {
$scope.myData.push(i);
}
$scope.numberOfPages = function () {
return Math.ceil($scope.myData.length / $scope.pageSize);
}
var x, y;
$http.get("category.json").then(function (response) {
$scope.myData = response.data.gold;
$scope.gold = function () {
$scope.currentPage = 0;
$scope.myData = response.data.gold;
}
$scope.silver = function () {
$scope.currentPage = 0;
$scope.myData = response.data.silver;
}
$scope.setActive = function (list, $event) {
$scope.activeMenu = list;
y = '';
y = angular.element($event.target).prop('clientHeight');
$scope.divStyle = {
"border": '2px solid red',
"pointer-events": "none"
}
}
$scope.hide = function () {
$scope.divStyle = {
"height": y * 2 + 'px',
"border": '2px solid green',
"pointer-events": "none"
}
}
});
});
app.filter('startFrom', function () {
return function (input, start) {
/*if (!angular.isArray(input)) { return []; }*/
if (!input || !input.length) {
return;
}
start = +start; //parse to int
return input.slice(start);
};
});
</script>
PLUNKR
I think that this should be your solution, I think I have understood your requirements, please go through and let me know if you have any issues with the code.
Plunkr Demo
I am using the condition $index === 0, but I am also adding another condition where if there is any selection, the first row will get disabled. This gets reset when you press the buttons gold and silver
There was another issue in your code, you had declared the style object inside the $scope.setActive function, I have moved it out, only then the style will get applied by default.
Apart from this, this is how I implemented the functionality!
<div class="small" ng-repeat="x in myData | startFrom:(currentPage)*pageSize | limitTo:pageSize" ng-click="setActive(x, $event)"
ng-style="$index === 0 && testBool ? divStyle : activeMenu === x ? divStyle: ''">
<h2 class="col-md-4 pull-left"> {{ x.caption }} </h2>
<div class="col-md-4 pull-left"> {{ x.description }} </div>
<div class="col-md-4 link text-right">view site</div>
</div>
This testBool scope variable is intially set to true. Then when any of the elements is clicked its set to false using the function.
$scope.setActive = function (list, $event) {
$scope.testBool = false;
$scope.activeMenu = list;
y = '';
y = angular.element($event.target).prop('clientHeight');
}
Then finally when the user presses the gold or the silver button, the variable is reset to true so that the first element will be selected again.
<button id="gold" class="active" ng-click="gold();testBool = true;">gold</button>
<button id="silver" class="" ng-click="silver();testBool = true;">silver</button>
I hope my explanation was understandable, please let me know if you have any queries.
To select by default 1st element you can write something like:
ng-style="$index === 0 ? divStyle : ''"
You can also make your code simple by put out and write something like:
<div id="btns">
<button id="rightBtn" ng-disabled="currentPage >= myData.length/pageSize - 1"
ng-click="currentPage=currentPage+1;activeMenu=myData[currentPage*5];">next</button>
<button id="leftBtn" ng-disabled="currentPage == 0"
ng-click="currentPage=currentPage-1;activeMenu=myData[currentPage*5];">prev</button>
</div>
Demo PLunker
You can use $first property with ng-class in ng-repeat like
<div class="small" ng-class="$first?'active':''" ng-repeat="x in myData | startFrom:(currentPage)*pageSize | limitTo:pageSize" ng-click="setActive(x, $event)" ng-style="activeMenu === x && divStyle">
I am attempting to create a simple content slider with AngularJS. I am following this tutorial:https://www.sitepoint.com/creating-slide-show-plugin-angularjs/
However, the content is "jumping". The next slide appears below the current one; it does not appear in its appropriate place while the other is fading out. Here is an image that hopefully clarifies the issue:
The HTML:
<div class="row" id='topSlider' ng-controller="SliderCtrl">
<h2 class="col-sm-12">Latest Stories</h2>
<div class="col-sm-12">
<div class="slider" ng-repeat="story in stories" ng-show="story.visible">
<a class="containerLink" href="View/ViewPost?postID={{story.StoryID}}">
<div class="slide">
<h3 class="cursive">{{story.Title}}</h3>
<blockquote>{{story.StoryPara}}</blockquote>
</div>
</a>
</div>
</div>
<div class="row" id="arrows">
<span class="glyphicon glyphicon-arrow-left"></span>
<span class="glyphicon glyphicon-arrow-right"></span>
</div>
The controller:
app.controller("SliderCtrl", ["$scope", "$http", "$timeout", function ($scope, $http, $timeout) {
$scope.currentIndex = 0;
$http.post("/StoryWall/Home/GetLatestStories").then(function (response) {
$scope.stories = response.data;
$scope.stories[0].visible = true;
},
function (response) {
$scope.stories = response.data;
});
$scope.next = function () {
$scope.currentIndex < $scope.stories.length - 1 ? $scope.currentIndex++ : $scope.currentIndex = 0;
};
$scope.prev = function () {
$scope.currentIndex > 0 ? $scope.currentIndex-- : $scope.currentIndex = $scope.stories.length - 1;
};
$scope.$watch("currentIndex", function () {
$scope.stories.forEach(function (story) {
story.visible = false;
});
$scope.stories[$scope.currentIndex].visible = true;
});
var timer;
var sliderFunction = function () {
timer = $timeout(function () {
$scope.next();
timer = $timeout(sliderFunction, 2000);
}, 5000);
};
sliderFunction();
}]);
and the CSS:
.slider.ng-hide-add, .slider.ng-hide-remove {
-webkit-transition:all linear 1s;
-moz-transition:all linear 1s;
-o-transition:all linear 1s;
transition:all linear 1s;
display:block!important;
clear: none;
float: none;
}
.slider.ng-hide-add.ng-hide-add-active,
.slider.ng-hide-remove {
opacity: 0;
}
.slider.ng-hide-add,
.slider.ng-hide-remove.ng-hide-remove-active {
opacity: 1;
}
Please note, if I remove the CSS it works just fine. The containers hide and show as they should. However, I would like to be able to apply some animations. I am new to both CSS animations and AngularJS; I apologize if this is a redudant or obvious issue.
check this css -> https://daneden.github.io/animate.css/
it's my script
var app=angular.module("app",[]);
app.controller("control",function($scope){
$scope.tab="1";
});
you focus on ng-show method
for example
all slider item in div like that
<div ng-show="tab==1" class="slider-item animated slideInRight">
...............
</div>
and your button must be
<button ng-mouseover="tab=1">1</button>
I hope I could help you
I need to switch between to div's. Div class="wrapper" must be visible by default. Div class="form" must be shown after admin approve. The problem is when i click on <a ng-click="toggle()"> it works only once, and no reaction after. If i will add some ng-hide to 'wrapper', ng-click works, but show/hide only 'form'. <a> must be shown after controller response, like class="form".
HTML:
<div class="body" ng-class="{'show': show && showTemp}">
<a ng-click="toggle()"></a>
<div class="form"></div>
<div class="wrapper"></div>
</div>
CSS:
.form {
display: none;
}
.wrapper {
display: block;
}
.show .form {
display: block;
}
.show .wrapper {
display: none;
}
Controller:
$scope.show = false;
$scope.showTemp = true;
// response from admin
$scope.$on('$show', function(e,data) {
$scope.show = true;
$scope.available = data;
});
// this click by user
$scope.toggle = function() {
$scope.showTemp = !$scope.showTemp;
};
Why can't you do something simpler like:
<div class="body" ng-init="showForm = false">
<a ng-click="showForm = available && ? false : !showForm">Click</a>
<div class="form" ng-show="showForm"></div>
<div class="wrapper" ng-hide="showForm"></div>
</div>
By using ngInit I'm setting a default value to showForm to false (You can do it from the controller as-well ($scope.showForm = false;) and then I toggle the ng-hide class (Which is found in angular.css any simply defined as .ng-hide {display: none;}) to show/hide the form and the wrapper DIVs.
When you click on the button the following condition is evaluated: showForm = available && ? false : !showForm - The showForm will always be hidden if there is no data available, and if there is data avalable, it will toggle between the form and the wrapper.
You can also add ng-show="available" to the button so it's only visible once there's data, because before it does nothing. A working example:
angular.module('app',[]).controller('ctrl', function($scope) {
$scope.setData = function(data) {
$scope.available = data;
$scope.showForm = true;
};
});
<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>
<div ng-app="app" ng-controller="ctrl">
<div class="body" ng-init="showForm = false">
<a ng-show="available" ng-click="showForm = !showForm">Click</a>
<br>
<div class="form" ng-show="showForm">THIS IS THE FORM<br>{{available | json}}</div>
<div class="wrapper" ng-hide="showForm">THIS IS THE WRAPPER</div>
<button ng-hide="available" ng-click="setData({val: 'test'})">SET MOCK DATA</button>
</div>
</div>
I have a button which when clicked displays a windows and hides it when the button is clicked again.I want the window to close even if any other place in the page is clicked.
This is my code :
<a class="btn dropdown-toggle multiselect-btn" ng-click="content=!content;contentClick=true">
//The div to show hide
<div ng-class="{'open':content}" > div content </div>
I wrote the following window on click code in the controller but it didn't work..
$window.onclick = function () {
if($scope.contentClick){
$scope.contentClick=0;
}
else{$scope.content=false;
$scope.$apply();}
}
What is the correct way to do this?Can anyone please guide me in the right direction.Thanks.
Try this, change your controller ID:
window.onclick = function () {
var scope = angular.element(document.getElementById('controller_id')).scope();
if(scope.contentClick){
scope.contentClick=0;
}
else{
scope.content=false;
scope.$apply();
}
}
I'm not sure what do you want to achieve after content was clicked, but you can $watch content value in controller and run some action when content change value
Please see script below
var app = angular.module('app', []);
app.controller('fCtrl', function($scope) {
$scope.$watch('content', function(value) {
if (value) {
$scope.contentClick = 1;
} else {
$scope.contentClick = 0;
}
})
});
.open {
color: red ;opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="fCtrl">
<a class="btn dropdown-toggle multiselect-btn" ng-click="content=!content;contentClick=true">Click me </a>
<hr/>//The div to show hide
<div ng-class="{'open':content}">div content {{contentClick}}
</div>
</div>
</div>
Hi guys I've been experimenting with a simple commenting app with AngularJS and I'm stuck on how to get an alert message popup in the view if a user inputs an empty string into an input field.
The HTML view and ng-show logic as below:
<div ng-show="alert===true" class="alert alert-warning alert-dismissible inner" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×
</span><span class="sr-only">Close</span></button>
<strong>Warning!</strong> You did not submit a comment.
</div>
The controller view and $scope logic as below:
// pushes data back to Firebase Array
$scope.addComment = function(){
if ($scope.newComment.text === ''){
$scope.alert = true;
}
else {
$scope.alert = false;
}
$scope.comments.$add($scope.newComment);
$scope.newComment = {text: '', date: ''};
};
The problem is that although I can bind the alert message logic to the HTML view, the alert message only shows up once and cannot be re-used again if the user types in an empty string again.
Should I use a while loop or something for this? Any help would be much appreciated!
EDIT:
Thanks to meriadec's feedback, I have made a fix using a more simple codebase, as follows.
The HTML view and ng-show logic as below:
<div ng-show="alert===true" class="alert alert-warning inner" role="alert">
<button type="button" class="btn" ng-click="alert=false"><span aria-hidden="true">×
</span><span class="sr-only">Close</span></button>
<strong>Warning!</strong> You did not submit a comment.
</div>
The controller view and $scope logic as below:
// pushes data back to Firebase Array
$scope.addComment = function(){
if ($scope.newComment.text === ''){
return $scope.alert = true;
};
$scope.comments.$add($scope.newComment);
$scope.newComment = {text: '', date: ''};
};
You can re-set your alert property to false when clicking the close button. BUT, as you got an ngShow directive, your alert is in a child scope so you need to use an object for having a correct data binding between scopes. More info here.
See this :
angular.module('demo', []);
angular.module('demo')
.controller('DemoCtrl', function ($scope) {
$scope.ui = { alert: false };
$scope.addComment = function () {
if (!$scope.myComment) {
$scope.ui.alert = true;
} else {
alert('well !');
}
}
});
.alert {
position: absolute;
top: 15px;
left: 20%;
right: 20%;
width: 300px;
background: white;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo" ng-controller="DemoCtrl">
<div class="alert" ng-show="ui.alert">
<button ng-click="ui.alert = false">close</button>
You did not enter any comment
</div>
<form ng-submit="addComment()">
<input type="text" ng-model="myComment">
<input type="submit">
</form>
</div>