I have created a plunkr with my code that does work. After the drop down is collapsed by clicking the Toggle collapse button, I need the dropdown to close on it's own after 3 seconds. I have played with the following in the HeaderCtrl in example.js with no luck:
function callAtTimeout(){
$scope.isFooCollapsed = true;
}
$timeout(function(){
!$scope.callAtTimeout();
}, 3000);
http://plnkr.co/edit/wMxA4Tkiqr9BsSfxia02?p=preview
Any help/input would be appreciated. Thanks in advance!
You can just use angular $timeout to achieve the wanted like this:
var timer;
$scope.isFooCollapsed = true;
$rootScope.$on("bagNotification", function() {
$timeout.cancel(timer);
$scope.isFooCollapsed = !$scope.isFooCollapsed;
timer = $timeout(function() {
$scope.isFooCollapsed = true;
}, 3000);
});
We cancel the timeout each time with $timeout.cancel to prevent multiple hide/shows when button is clicked multiple times.
Plunkr: http://plnkr.co/edit/YbsCuicDiHVDGULwpap3?p=preview
Related
I am a newbie of ionic 1 and angular JS 1, I would like to change a colour of an icon when a specific time is reached without refresh the page.
My current code is as below :
<button class="icon ion-ios-videocam" ng-style="iconstyle”> </button>
var currentTime = Date();
var parsecurrenttime = Date.parse(currentTime);
if (parsecurrenttime >= parseTargetTime) {
$scope.iconstyle = {
color: '#e42112'
};
}
May I know is there any idea how to achieve it without refresh the page ?
Many thanks.
Use $timeout Service from angular.
Your code should look like this:
$timeout(function() {
$scope.iconstyle = {
color: '#e42112'
};
}, 3000); //time in milliseconds = 3 seconds
The function will be executed after 3 seconds.
The simplest solution would be calculating how long you have to wait until the script should be executed and set timer to such interval. I see you are using AngularJS, so you have to put the below code somewhere in your controller.
var timeout = null;
// Clean-up
$scope.$on('$destroy', function () {
$timeout.cancel(timeout);
});
function changeColor() {
$scope.iconstyle = {
color: '#e42112'
};
}
(function() {
var interval = new Date(2016, 11, 27, 18, 0).getTime() - Date.now();
timeout = $timeout(changeColor, interval);
})();
Explanation
The first function is simply manipulating the $scope object. It is invoked by the timeout, which is set in the self-invoking function placed below. The self-invoking function will calculate the time needed to wait until the changeColor function should be called. In this case, the function will run at "2016-12-27 18:00". The timeout will be re-calculated on each controller instantiation.
If you want to make it something like when page get loaded after 30 seconds button color get green.
.goGreen{
color:green;
}
<button class="icon ion-ios-videocam" ng-class='{goGreen:ifBtngreen}'> </button>
$scope.ifBtngreen=false;
var parseTargetTime=30000 //in milliseconds
$scope.$on('$ionicViewEnter',function(){
$scope.startTime()
})
$scope.startTime=function(){
$timeout(function() {
$scope.ifBtngreen =true;
}, parseTargetTime);
}
I am trying to create a radio button, that when the user click "active" - an alert will appear. If he clicked cancel, stay (or go back) to the old value.
problem is, the what happens is that both of the radio buttons are "unchecked". and thats obviously not the wanted behaviour.
I've attached a code example.
code example
thanks in advance,
ben.
Add timeout before setting the value to false.
var app = angular.module('app', []);
app.controller('firstCtrl', function($scope,$timeout){
$scope.value = {
text : false
};
$scope.checkRadioButton = function() {
if ($scope.value.text === true) {
if (!window.confirm("Are you sure?")) {
$timeout(function(){
$scope.value.text = false;
});
}
}
}
});
I am new to angularjs and UI dev too and I have tried to implement a functionality of disabling the button on-click of it and showing a message on page e.g "In progress" and after 3 secs button should get enabled with a different message e.g "Completed".
Button is getting disabled on click but and not showing notification "In Progress"on-click instead showing notification "Complete"after 3 secs.
I have seen this similar kind of problem solved before in this forum but not able to figure out missing logic in my code ............kindly please help
MY HTML:
Analysis
In Progress
Complete
Controller:
$scope.isDisabled=false;
$scope.showNotification=false;
$scope.isEnabled=true;
$scope.completeNotification=false;
$scope.showNext=function(){
$scope.isDisabled=true;
$scope.showNotification=true;
$scope.buttonWait();
$scope.buttonWait = function() {
$timeout($scope.isEnabled = true, $scope.showNotification = false, $scope.completeNotification = true, 3000);
}
$timeout(function() {
$scope.isEnabled = true;
// ...
}, 3000);
as mentioned by Mikko, your syntax seems to be wrong. it should be like
$scope.buttonWait = function() {
$timeout(function() {
$scope.isEnabled = true,
$scope.showNotification = false,
$scope.completeNotification = true
}), 3000);
};
sample plnkr link here
I have a side menu with:
<ion-side-menus enable-menu-with-back-views="true">
So it is accesable from each view of my app. So now when there is a back view i have a back icon AND the menu icon in the top left nav-bar. How can i disable the menu-icon when there is a back-icon?
The method from here:
$scope.$on('$ionicView.beforeEnter', function (e, data) {
if (data.enableBack) {
$scope.$root.showMenuIcon = false;
} else {
$scope.$root.showMenuIcon = true;
}
});
Is not working! Because it is never called! Maybe $ionicView.beforeEnter does not exist anymore? At least it is never fired.
I solved that problem with this code in each view controller
$scope.$on('$ionicView.beforeEnter', function () {
$ionicSideMenuDelegate.canDragContent(false);
});
$scope.$on('$ionicView.leave', function () {
$ionicSideMenuDelegate.canDragContent(true);
});
Hope it helps
don't forget to add $ionicSideMenuDelegate to your controller
I'm just getting my feet wet with Backbone, and I think I have an easy problem to solve. I have the following view which is a simple tab that when clicked opens up a panel and when closed goes back to a tab:
myApp.views.Support = {
Form: Backbone.View.extend({
initialize: function () {
this.el = $('#support');
this._ensureElement();
},
render: function () {
if (this.$el.hasClass('support-panel')) {
// close panel
this.$el.empty();
this.$el.removeClass('support-panel');
this.$el.addClass('support-button');
}
else {
// open and populate panel
var template = _.template(myApp.utils.RenderTemplate('support/default'), {});
this.$el.removeClass('support-button');
this.$el.addClass('support-panel');
this.$el.html(template);
}
return this;
},
closePanel: function () {
alert('close event fired');
},
events: {
'click #SubmitFormButton': 'submitForm',
'click #CloseSupportPanel': 'closePanel'
},
submitForm: function (event) {
alert('form submitted: ' + $('#message'));
}
})
}
Everything is working fine except that "closePanel" gets fired +2 times every time the click event happens. I assume it's some sort of cleanup I'm missing but I don't know what.
Likely its because the event is bubbling up. Try returning false.
I know this is an old question but it helped me realize what my issue was. Returning false as Daniel said works, but the root cause of my issue was having the jQuery selector twice in my markup, resulting in two jQuery objects being created thus the click event fires twice.