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;
});
}
}
}
});
Related
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
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
Im having a problem in my forms in validating empty fields. When the user clicked the edit button and clear the input field then click the send button, there is no validation that’s happening. I’ve tried angularjs’s form validation but it seems not working. Here’s the live view Thanks
http://jsfiddle.net/5DMjt/920/
function ClickToEditCtrl($scope) {
$scope.name = "joe Doe";
$scope.email = "joe#yahoo.com";
$scope.enableEditor = function () {
$scope.showEditor = true;
$scope.editName = $scope.name;
$scope.editEmail = $scope.email;
};
$scope.disableEditor = function () {
$scope.showEditor = false;
};
$scope.saveEditor = function () {
$scope.name = $scope.editName;
$scope.email = $scope.editEmail;
$scope.disableEditor();
};
}
There are multiple issues with your fiddle.
Firstly the scope properties such as studentForm.name.$dirty for ngModelController used in submit is incorrect.
Each of your input should have name properties so that i can be referenced in code under form controller reference.
Secondly for ng-disable it should be button or input not div.
Lastly you can check the form state instead of all input state.
Please check my fiddle:
http://jsfiddle.net/cmyworld/dxzeggtp/
I have a scroll up event and a scroll down event. I am trying to use FoundationAPI.animate to slideInUp a div on scroll up and then slideOutBottom on scroll down. The original state of the div has a class of hide because without scrolling - it lives off the bottom of the page. I have this working except for one problem. When the slideOutBottom animation is finished, the hide class no longer is in the div, so it shows after the slideOutBottom completes. I want it to stay hidden like it was at state 0.
Code:
$scope.scrollUp = function() {
if ($scope.lock == false ){
console.log('scrolling up');
$scope.lock = true;
FoundationApi.animate($('.footer-bar'), $state, "slideInUp", "hide");
console.log($state);
}
};
$scope.scrollDown = function() {
if ($scope.lock == true){
console.log('scrolling down');
$scope.lock = false;
FoundationApi.animate($('.footer-bar'), !$state, "hide", "slideOutBottom");
// setTimeout(function() {
// $('.footer-bar').addClass('hide');
// }, 999);
}
};
How do I access a callback for the FoundationAPI.animate(4) function such that it fires when it is complete? The commented out timeout works, but after the slideOutBottom finishes, the footer-bar appears, then the hide class gets applied. This causes the div to blink quickly. Anyone? The documentation on FoundationApi is lacking right now...
Not an answer but a solution. This a more natural AngularJS approach:
Controller:
function myController($scope, ...) {
$scope.lock = false;
$scope.scrollUp = function() {
if ($scope.lock == false ){
$scope.lock = true;
$scope.$apply();
}
};
$scope.scrollDown = function() {
if ($scope.lock == true){
$scope.lock = false;
$scope.$apply();
}
};
}
View:
<a id="footer" class="slideInUp slideOutBottom footer-bar" ng-hide="lock" zf-open="myModal">
<div>Click Me</div>
</a>
So the scroll events I bind with a directive on the particular view container; this determines the logic for when we detect the scroll up/down events. From the directive I call these functions that are defined the scoped controller (above). These are bound 2-ways with the "lock" variable accessible in this scope.
Note that the way the animations are triggered are with the classes in the anchor. I think there are defined enter animations and defined exit animations which are both present in the class. So ng-hide kicks in depending on the boolean value of the $scope.lock variable in my controller.
Totally not clear - I guess would be more clear to an Angular expert
I am building a small message system. I use tabs in my state (inbox, outbox). Also, i want to sent a message when i click a "contact" link. If i click that link, this should happen:
change state to messages state
open other tab, called "newmsg"
At this moment, this is what i have:
<a ng-click="mailContact()">contact</a>
and i my controller:
$scope.mailContact = function() {
$state.go('root.messages');
$scope.openTab('new');
};
Obviously this is not working, because $scope.openTab('new'); will never execute. The state changes to what i want, but the tab is not opened. I do not have a clue of how to get it done.
Ok, stupid thing was i had an init which opened the "inbox"...
Now i wrote a service which does the trick.
app.factory('msgTabService', ['$rootScope', function($rootScope) {
var msgTabService = {};
var tabname = "inbox";
msgTabService.set = function(tab) {
tabname = tab;
};
msgTabService.get = function() {
return tabname;
};
msgTabService.openTab = function(tab) {
if ($rootScope.currenttab !== tab)
{
$rootScope.currenttab = tab;
msgTabService.set(tab);
}
};
return msgTabService;
}]);
The question may be similar to: Save State of Tab content when changing Route with angularjs and BootStrap Tabs