I am currently working on a hotel booking app using Ionic 1 and AngularJS.
When the room is booked you will be greeted by a ng-modal popup with your room Information and contact info etc etc.
I implemented a button that takes the user out of the modal window and back to the home page like this.
<a href="#tab/home" style="text-decoration: none;">
<button class="button button-large button-balanced col" ng-click="modal.hide()" >
<p style="color: white; font-size: 20px;">Thank you</p>
</button>
I also want that same button to reset the whole application, is there an easy way to do this?
Thank you:)
When the modal window gets closed you are getting back to the parent controller, have a function implemented resetting the form and call the function.
$scope.reset = function(){
}
call it when you return back to the parent controller.
Related
Ionic v1
I was using ui-sref to simply navigate from one page to another in my ionic app, but recently have to switch to $state.go because pressing button closes the app. I figured it out that states are not maintained in ui-sref.
So my question is do I have to always use $state.go if I just want to simply navigate between pages without closing my app and create a separate function in controller to go to next page.
Code for ref
<button class=" button button-assertive" ui-sref="nextPage">Next</a>
or
<button class=" button button-assertive" ng-click="gotonext()">Next</a>
JS
$scope.gotonext = function(){
$state.go('nextPage')
};
Try this :-
$scope.gotonext = function(){
$location.path("/nextPage");
};
I am making a angularjs app and in this I have a list of users coming fromng-repeat. Now whenever I click on any user a new div box opens. But the problem is that there are multiple boxes opening for the same user and I want only one box for one user.
I tried using ng-if but failed.
I am sharing my code, please check it and provide solutions, thanks in advance.
Code from List of user are coming :
<div class="people">
<div ng-repeat="user in vm.otherUsers | filter : vm.search">
<div directive class="person" ng-click="vm.activateChat(user);bubble=true;" id="chat_{{user.id}}" ng-disabled="true">
<img alt="" />
<span class="name" >{{user.firstName}} {{user.lastName}}
<span ng-if="!bubble && user.counter>0" class="noti_bubble">{{user.counter}}</span>
</span>
</div>
</div>
</div>
and on click activateChat opens the new box for that user.
Code for the box is:
<div ng-repeat="chatUser in vm.multipleUsers">
<div class="msg_box" id="d_{{chatUser.id}}">
--box content--
</div>
</div>
Note: Only one box should open for a single user
You could keep a list of opened boxes per userId in your controller. Then add a function to your controller that you can use in an ng-if or ng-class to show a non-clickable version of your div. Use the same list to check if you should open a new modal in vm.activateChat()
All I want to accomplish is to show a "loading ..." when the submit button is clicked using AngularJS.
I figured that should be quite easy using
<form ng-if="!export.buttonClicked">
... various input values without ng-model
<input type="submit" value="Start export" class="btn btn-default" ng-click="export.buttonClicked=true;">
</form>
<div ng-if="export.buttonClicked">
loading...
</div>
How could I be so wrong. Seems like Angular prevents the default form submission like this. Showing the loading div works quite fine, but I need the form to be submitted (The server has to calculate a lot so it responds slowly and I would like to show loading... instead of the Button once it has been clicked)
I can't use ng-submit because I have to combine AngularJS with Razor and I don't want no ng-form or ng-model...
Any ideas?
If you have an angular controller tied to the page or div, just use a function in your ng-click like this:
<div ng-controller="sampleController" style="text-align:center">
<button ng-click="buttonClickedFunction()">Submit</button>
<p>{{message}}</p>
</div>
Then in your controller:
yourAppName.controller('sampleController', function($scope) {
$scope.buttonClickedFunction = function() {
$scope.message = "Loading...";
// Whatever else you wish to do with your button/function.
};
});
This puts loading on the screen once button is clicked, if this is what you were shooting to do?
Mobile Angular UI Is getting popular which is nothing but bootstrap 3 and angularjs combination
I would like to create a modal dialog box on button click and close the dialog on close icon, how to do it?
Based on the docs it says
<div ui-content-for="modals">
<div class="modal" ui-if="modal1" ui-state='modal1'>
.....
</div>
</div>
But how to call this dialog, I tried this
<button ui-turn-on="modal1" class="btn btn-primary">Show Model</button>
But it is not working as expected, I am getting Warning: Attempt to set uninitialized shared state: modal1error
I think you have placed ui-content-for inside the ui-yield-to
Put it outside that div tag as follows
<div ui-yield-to="modals"></div>
<div ui-content-for="modals">
<div class="modal" ui-if="modal1" ui-state="modal1">
....your model html code
</div>
</div>
So that modals will remain as a place holder
I've been struggling with a ng-hide issue in combination with using ui-router. Simple app. Index.html shows some data via the "notes" route, you click on "detail" and you go to the sub route "notes.note" to view the detail just below the other records. The "detail" html has a "Save" & "Cancel" button.
Now there is an "Add New" button when you are not viewing the detail with the attribute ng-hide="HideAddNew". "HideAddNew" is a $scope variable in the controller. When I click "detail" on a row I have this ng-click="toggleAddNew()" on the link which in turn calls this
$scope.toggleAddNew= function()
{
$scope.HideAddNew=($scope.HideAddNew ? false : true);
}
That works perfectly, my detail shows and my "Add New" button has disappeared. Now on the detail when I click "Cancel" it fire off the ng-click="hideData()" which calls the function:
$scope.hideData=function()
{
$scope.toggleAddNew();
$state.go('notes');
}
And now my "Add New" has disappeared even though the variable is set to false, i.e. Don't hide. I've tried $timeout in that "hideData" function and in the "toggleAddNew" function. I've tried putting "$scope.toggleAddNew();" after the "$state.go('notes');" too. I don't want to resort to manually adding and removing classes. AngularJS ver: v1.3.15 , ui-router ver: v0.2.13 Thanx all :)
EDIT
Would the below work Tony?
<button ng-if="HideAddNew" ng-click="SelectRoute('notenew')" class="btn btn-primary">
<span class="glyphicon glyphicon-plus -glyphicon-align-left"></span>Add New</button>
Perhaps you could simplify and use ng-switch instead.
Something like this:
<ul ng-switch="expression">
<li ng-switch-when="firstThing">my first thing</li>
<li ng-switch-when="secondThing">my second thing</li>
<li ng-switch-default>default</li>
</ul>
Alternatively, maybe you could use ng-if or ng-show instead of ng-hide, eg:
<p ng-if="HideAddNew">it's here!</p>
<p ng-if="!HideAddNew">it's not here.</p>
Edit
If I understand what you're trying to achieve exactly, I would use ng-show with an ng-click:
Controller:
$scope.addNew = false;
View:
<button ng-show="!addNew" ng-click="addNew = true">Add New</button>
<button ng-show="addNew" ng-click="save()">Save</button>
<button ng-show="addNew" ng-click="addNew = false">Cancel</button>
Example