Hi guys i want to show and hide div on modal-popup in angularjs(bootstrap3.3) following is the code i have written , on page load the required myModal_username1is displayed but on click of submit when the controller function is called the myModal_username1 is supposed to be visiblely false and other div should be visibly true.. but same is not happeing.
Controller Code:
angular.module('ratefastApp')
.controller('LoginCtrl', function ($scope, Auth, $location) {
$scope.showUser = 'true';
$scope.x= function(form) {
$scope.showPass = 'false';
}}
view :
<div class="modal fade" id="myModal_username" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Forgot your Username ?</h4>
</div>
<!-- div check -->
<div ng-show="showUser" id="myModal_username1" class="modal-body"
ng-include src="'views/partials/forgotstage_username.html'">
</div>
<!-- div question -->
<div ng-hide="showUser" id="myModal_username2" class="modal-body"
ng-include src="'views/partials/forgot_username.html'">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
The x() function (whose name is really awful, BTW) doesn't change the value of showUser, which is used by the view. It initializes a new scope field named showPass:
$scope.showPass = 'false';
Also, ng-include has its own scope, inheriting from the controller scope. Setting a field in this child scope will thus add the field to the child scope, but won't change the value of the field in the controller scope.
You also shouldn't use strings for booleans. Use true and false, not 'true' and 'false'.
So the code should be:
$scope.visibility = {
showUser: true
}
$scope.submit = function(form) {
$scope.visibility.showUser = false;
}
Related
So have a modal with a two buttons on it. One to close the modal, and one that should fire a function when clicked. I've attached a controller to the modal, and the controller itself works, as it does a successful console.log(). The ng-click doesn't seem to fire the function though. I think I just need another set of eyes on this, and it is greatly appreciated.
HTML:
<div id="forwardCall" class="modal fade" ng-controller="CallCtrl as call">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4>Transfer Call</h4>
</div>
<!-- dialog body -->
<div class="modal-body">
<p>Select Person below</p>
<div id="transferSelection">
<?php echo $transferCallSelect; ?>
</div>
</div>
<!-- dialog buttons -->
<div class="modal-footer">
<button class="btn btn-warning" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="call.hideControls()">Transfer Call</button></div>
</div>
</div>
</div>
Controller:
app.controller('CallCtrl', ['$scope', '$http', function($scope, $http){
console.log("Call Controller");
function hideControls(){
console.log("Controls Hidden");
var well = document.getElementById('callControls');
well.style.display = 'none';
}
}]);
If you are using controller as syntax, you are binding to this variable instead of $scope. Here is a good post talked about Controller As Syntax.
tymejv gave you a good suggestion. You have to binding the function to this when you are using controller as syntax. So that you can access the function or variable for this particular controller.
this.hideControls = function() { ... };
You can binding to function to the $scope as well:
$scope.hideControls = function() { ... };
controller.js
(function () {
'use strict';
angular
.module('app')
.controller('CallCtrl', CallCtrl);
CallCtrl.$inject = ['$scope', '$http'];
function CallCtrl($scope, $http) {
var vm = this;
console.log("Call Controller");
vm.well = true;
vm.hideControls = function () {
console.log("Controls Hidden");
//Do not to this! This is not jQuery
//var well = document.getElementById('callControls');
//well.style.display = 'none';
vm.well = false;
};
}
}());
index.html
<div id="forwardCall" class="modal fade" ng-controller="CallCtrl as call">
<div ng-show={{ call.well }}>Some content</div>
</div>
Here i trying to implement application in angular js. I have an minimize/maximize button for all child element and seprate minimize/maximize button to inside child element.
But when i click toggle minimize its minimize all all child element.
Problem is when i click toggleonce it also minimize all child element.
var dashboard = angular.module("dashboard",['ui.bootstrap']);
dashboard.controller('dash-control', ['$scope', function($scope) {
$scope.isHidden = false;
$scope.toggle = function(){
$scope.isHidden = !$scope.isHidden;
};
$scope.toggleonce= function()
{
if( this.isHidden === true)
this.isHidden = false;
else
this.isHidden = true;
};
}]);
VIEW:
<div class="contentpanel" ng-app="dashboard" ng-controller="dash-control as ctrl">
<button class="btn btn-white" type="button" ng-click="toggle()">
<i class="fa fa-minus-square"></i>
</button>
<div>
<a href="" class="tooltips" ng-click="toggleonce()" title="Minimize Panel">
<i class="fa fa-minus"></i>
</a>
<div class="row tinychart" ng-show="isHidden">Contenr Heading 1</div>
<div class="row tinychart" ng-hide="isHidden">Content Description 1</div>
</div>
<div>
<a href="" class="tooltips" ng-click="toggleonce()" title="Minimize Panel">
<i class="fa fa-minus"></i>
</a>
<div class="row tinychart" ng-show="isHidden">Contenr Heading 2</div>
<div class="row tinychart" ng-hide="isHidden">Content Description 1</div>
</div>
......
.....
.....
</div>
The variable $scope.isHidden is a controller level variable and by clicking toggleonce() you are changing the variable to true through out the page(since both the 'minimize panels' are in the scope of the controller. Thereby any ng-hide for isHidden will be hidden and thereby it is causing the global 'minimise'.
You have two options:
1) use separate variables for each Minimize panel and toggle the values of that variable when you click on the corresponding function. Also write the Panel level 'ng-hide's for its own variable.
2) write a isolated scope directive for all Minizable panels. And isolate its scope from the Controller. Now write a toggleonce function in the directive which changes the value of the Hidden variable within the directive's scope. You must use the following syntax while writing the directive:
.directive('minimizePanel', function() {
return {
scope: true,
};
You can watch this video for more inputs.
I'm simply trying to set up a warning dialog, and trying out Bootstrap modal for starters.
Bootstrap modal: http://getbootstrap.com/javascript/#modals
The modal fires but it does NOT show my modalTitle and modalBody values !
HTML snippet here (note the vm.modalTitle and vm.modalBody scope vars) -
<!-- Bootstrap Modal Dialog Template-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel"><span ng-model="vm.modalTitle"></span></h4>
</div>
<div class="modal-body"><span ng-model="vm.modalBody"></span></div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
</div>
</div>
</div>
and my controller code :
vm.modalTitle = ''; vars initialized at the top of my controller
vm.modalBody = '';
...
function sendRequest(){
if (data.status == 'FAIL') {
if (data.messages.length > 0) {
logErr("Error submitting aggregation request: " + data.messages[0]);
vm.modalTitle = "Error submitting aggregation query !";
vm.modalBody = data.messages[0];
$('#myModal').modal('toggle');
$('#myModal').on('hide.bs.modal', function (e) {
// fired when modal is hidden from user
})
return;
}
}
}
The modal fires but it does NOT show my modalTitle and modalBody values !
I tried this route when I first learned Angular and very quickly got frustrated with the hacks that I had to do to get it to work. Your best bet is to use the AngularUI modal. It wraps the Bootstrap modal very nicely. http://angular-ui.github.io/bootstrap/.
I have an ember application with two models, user and subject. Each user has a number of subjects associated with them. I have a user/create template in which you can input a new users details, ie their name, email address and associated subjects. The subjects are selected from a list of checkbox values, driven by the subjects in the subject controller. My problem is that when I click on save, the controller seems to skip over the subject selection and doesn't add them to the JSON payload. Can anyone help?
Create Template:
<script type = "text/x-handlebars" id = "user/create">
<div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">New User</h4>
</div>
<div class="modal-body">
<div class = "input-group">
<form>
<h5>First Name</h5>
{{input value=firstName}}
<h5>Last Name</h5>
{{input value=lastName}}
<h5>Email</h5>
{{input value=email}}
<h5>Subjects</h5>
{{#each subject in subjects}}
<label>
{{view Ember.Checkbox Binding="id"}}
{{subject.name}}
</label><br />
{{/each}}
</form>
</div>
</div>
<div class="modal-footer">
<a {{action close target="view"}} href="#" class="btn btn-default">Cancel</a>
<a data-dismiss="modal" {{action "save"}} class="btn btn-primary">Save changes</a>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</script>
UserCreateView:
App.UserCreateView = Ember.View.extend({
didInsertElement:function(){
$('#createModal').modal('show');
var self = this;
$('#createModal').on('hidden.bs.modal', function (e) {
self.controller.transitionToRoute("users");
});
},
actions:{
close:function(){
this.$(".close").click();
},
save: function(){
alert('(in view) saved in view');
this.controller.send("save");
self.controller.transitionToRoute("users");
this.$(".close").click();
$('#createModal').modal('hide');
}
},
)};
CreateController:
App.UsersCreateController = Ember.ObjectController.extend({
subjects: function() {
return this.store.find('subject');
}.property(),
actions: {
save: function(){
alert('(UsersCreateController) SENDING A POST REQUEST');
var newUser = this.store.createRecord('user', this.get('model'));
console.log("newUser", newUser);
newUser.save();
this.transitionToRoute('users');
$('#createModal').modal('hide');
}
}
});
The first thing I would look at is the binding attribute you are using on your checkbox(es). For non-checkbox or {{input}} you bind via the value attribute. BUT - for checkboxes you must bind on the "checked" attribute.
Take a look at http://emberjs.com/guides/templates/input-helpers/ - about halfway down under Checkboxes for more info, it will show the accepted attributes, etc.
I experienced the same issue wherein this:
{{input type="checkbox" class="input-small" id="inputCache" value=cache}}
did not work with regard to passing in the checkbox-values to the action handling the submit (other values were passed in and persisted fine), whereas simply changing the attribute to this:
{{input type="checkbox" class="input-small" id="inputCache" checked=cache}}
solved the entire problem.
Hopefully this will do the trick. Good luck :-)
I am not very experienced with angular and I just can't figure out why is my code behaving like this.. I have a controller, that gets data from a factory and a modal to display it. It returns the right data, according to the id it passes, but after on ng-repeat it loads the data for the first record only or nothing:
`
<div ng-controller="TokensCtrl">Get Tokens{{child.ChildId}}
<div id="tokensModal" class="modal fade tokens" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Tokens:</h3>
</div>
<div class="modal-body">
<ul ng-repeat='token in tokens'>
<li><input value={{token}} /></li>
</ul>{{tokens}} <!--the first record set of tokens on every iteration -->
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
the controller, that returns the right data:
app.controller('TokensCtrl',
function ($scope, tokens) {
$scope.status;
$scope.test = 'testing';
$scope.getTokens = function (id) {
console.log(id + "controller");
tokens.getTokens(id)
.success(function (tokens) {
$scope.tokens = tokens;
console.log($scope.tokens);// here i can see it returns the right set of tokens
})
.error(function (error) {
$scope.status = "Unable to get tokens: " + error.message;
})
}
}
)
`
I assume it might be some silly mistake, but I just can't see it.. or not
Try putting the ng-repeat directive in the li tag instead of ul.