when i close the ngdialog popup after checking the checkbox which is inside of it, and again if i open it then the checkbox is getting unchecked, why is it happening do anybody know that?
this is my script tag
<script type="text/ng-template" id="templateId">
<div id="target" ng-click="test()" ng-controller="tt">
Click here
<input type='checkbox' placeholder=''>
</div>
</script>
this is my example jsfiddle http://jsfiddle.net/mb6o4yd1/264/
It seems that this ngDialog module destroys the controller after it is closed. If you want to access and keep the changes in your controller. Use $parent from your controller.
I've created this fiddle for you.
<script type="text/ng-template" id="templateId">
<div id="target" ng-click="test()">
Click here
<input type='checkbox' ng-model="$parent.checkbox">
</div>
OR
Using your approach you have to save the values into a factory before leaving the dialog
Hope it helps.
You need to declare a model on your checkbox, eg:
Then you need to copy that value to the scope of you choosing when the dialog is closed, so that when the modal dialog is opened again, it can access that value (provided it is available). The scope of the modal dialog will be disposed when the dialog is closed, so you cannot save its state there.
Bind a model which holds the checkbox value and have it in your parent controller. This would fix your issue.
Related
On ngDialog (https://github.com/likeastore/ngDialog), is there a built in way to close a dialog from within the template it self? I.e. so I don't need any functions in the controller calling the dialog?
This is my template (errorPopup.html):
<div>
<div class="alert alert-warning">
<div class="errorLogo"><i class="icon-exclaim"></i></div>
<div class="errorContent" data-ng-bind-html="errorMessage"></div>
</div>
<div class="buttonWrapper">
<button type="button" class="btn-primary pull-right">
<span res="close"></span>
</button>
</div>
</div>
And this is how I open the dialog:
function showErrorPopup() {
ngDialog.open({
template: 'errorPopup.html',
scope: $scope,
className: 'ngdialog-theme-default ngdialog-cart-theme',
showClose: true,
appendTo: 'div[ui-view]',
closeByDocument: false
});
}
So when I call showErrorPopup() I get a dialog displayed, however, I need to make this "close" button to actually dismiss/close the popup. As of now, this is just a plan button that doesn't do anything.
Is there something I can do a the template level (without changing my controller's code) to make the button work?
Maybe I should be using a default button instead of my own? If so, how?
PS: I notice thats clicking on the X button on the top right works, the popup is dismissed.
Thanks all!
You don`t have to inject ngDialog module in your $scope. You can call closeThisDialog() function in your popup template directly:
<button ng-click="closeThisDialog(0)">Close</button>
function argument is the value to resolve popup with.
If you want to call the close function of the ngDialog directly from the view, you must inject the module itself to the scope inside the controller, in order for it to become available from the view:
$scope.ngDialog = ngDialog;
Then, you can use it directly from within the view:
<button ng-click="ngDialog.close()">Close</button>
It is hard to say what exactly you are doing wrong, until you paste some controller and app.js and HTML code contents.
Yes, ngDialog has built-in way of closing the dialog
Make Sure you set the className to 'ngdialog-theme-flat ngdialog-theme-custom' or other css class as described in the docs inside open function.
You have added handler with name "closeThisDialog" , but function has another name "closePopup".
Maybe it is your issue.
just follow these steps
1.when creating app
var app = angular.module('sampleApp', ['ngDialog']);
2.use button like this
<button ng-click="clickMe()">Click to Open</button>
3.put this in your controller
`$scope.clickMe = function () {
ngDialog.open();
};`
by default it has code to close,It'll close automatically when you click on close.
Hope it'll be useful
I'm trying to make a check box that should be ticked when a value from the controller is filled (!= null).
It also need to be able to be ticked off and on, but I can't get it to work:
<input type='checkbox'
ng-false-value="''"
ng-model="entry[element.propertyName]"
id="q{{element.id}}"
ng-checked="entry[element.propertyName] != ''"
>
The check box is ticked when entry[element.propertyName] is filled, so far so good. But when I untick the check box the model remains unchanged, even though I've set ng-false-value, and the 'selected=selected' attribute doesn't disappear. When I tick and untick again, then the model starts to change to true and ''
Should be the easiest thing in the world, what am I missing here?
I'm using Angular 1.3.11
I have no idea why you are using ng-false-value, never saw that before.
Here is a snippet with a button updating a checkbox.
function testCtrl($scope){
// Initialise the checkbox as unckecked
$scope.testIsChecked=false;
// This function makes the checkob checked
$scope.makeItCHecked = function(){
$scope.testIsChecked=true;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="testCtrl">
<div><input type="checkbox" ng-model="testIsChecked">
$scope.testIsChecked value : {{testIsChecked}}</div>
<button ng-click="testIsChecked=true">Make it checked</button>
</div>
</div>
See this link for explanation.
You can include the array in an object like:
public class objElement
{
string[] propertyName;
}
and then bind to your checkbox.
I'm using the kendo-angular tooltip directive with ng-repeat like so:
<div ng-repeat="thing in things"
kendo-tooltip="tooltip"
k-options="thingTooltipModel"
data-thingname="{{thing.name}}>
</div>
<script type="text/x-kendo-template" id="thingTooltipTemplate">
<span>Thing Name: #= target.data('thingname') #</span>
</script>
As stated in the kendo-angular documentation, the kendo widget isn't notified when I update things, so the tooltip continues to display the initial data. Is there a way to manually tell kendo to re-read the data?
In the controller's method Maybe you should put $scope.$apply(function(){//Your CODE for the Update})
You can use k-rebind:
<div ng-repeat="thing in things"
kendo-tooltip="tooltip"
k-options="thingTooltipModel"
k-rebind="thing"
data-thingname="{{thing.name}}>
</div>
That will destroy the old widget and create a new one.
I have the jquery dialog with input ng-model
<input type="text" ng-model="testing">
{{testing}} // This works
But if I declare {{testing}} outside of jquery dialog angular is not binding the data. Why this is happening. How to fix this.
Here is the fiddle currently working
Try to put all of your elements inside a controller.
<div ng-app>
<div ng-controller="Ctrl">
see
example
I am trying to generate an editable list using ng-repeat. I want to remind the user to update any edits before moving on, so I am using ng-form to create "nested" forms on the fly because the documentation says I can then use validation on these dynamically created inputs.
While that seems to work within the HTML, I don't see how to access those dynamically created forms and related validation fields in the controller. Specifically, when the user changes the input I use the form $dirty property to bring up a button to tell the user to commit the changes. So far, so good. However, once the changes are committed I want to $setPristine() on the field to indicate that the changes have been set. There may be other ways of ensuring that changes are committed on each input before I allow the main form committed, but this was the best I could come up with.
Unfortunately, even though the documentation says that if I name the ng-form it will be propagated to the $scope object, I can't find a way to access it. $scope.dynamic_form is undefined.
Here is a plunker showing what I mean:
plnk
Thanks!
[EDIT] Just to add to the issue, what does work for this specific example is to add to the ng-click on the dynamically created input:
ng-click="namesForm.name.$setPristine();clean()"
But I still don't have access to the dynamically created form in the controller. I would like, for example, to add a watcher to the namesForm.name.$pristine so that I can set the mainForm.$setValidity(false) whenever the sub-form is $dirty to prevent the user from submitting the main form until all sub-form changes have been committed.
So in a nutshell, the issue is how to access in a parent controller the validation values of a dynamically created nested ngForm?
Updated 2015-01-17:
As pointed out by Leblanc Meneses in the comments Angular 1.3 now supports interpolation with form, ngForm and input directives.
This means that using expressions to name your elements:
<div ng-form="namesForm_{{$index}}" ng-repeat="name in names">
<input type="text"
name="input_{{$index}}_0"></input>
<!-- ... -->
</div>
will work as expected:
$scope['namesForm_0']
$scope.namesForm_1
// Access nested form elements:
$scope.namesForm_1.input_1_0
...
Original answer for Angular <= 1.2:
Working with forms and the ngFormController can get tricky pretty quickly.
You need to be aware that you can dynamically add form elements and inputs but they can't be dynamically named - interpolation does not work in the ngForm or name directives.
For example, if you tried to name your nested forms dynamically like this:
<div ng-form="namesForm_{{$index}}" ng-repeat="name in names">
<!-- ... -->
</div>
Instead of making all the nested forms available on the scope like this: scope['namesForm_0'] you would only have access to the single (last) form with the literal name scope['namesForm_{{$index}}'].
In your situation you need to create a custom directive that will be added along with ngFormto handle setting $pristine$ and $invalid for that form instance.
JavaScript:
This directive will watch the $dirty state of its form to set the $validity to prevent submission when dirty and handle setting the $pristine state when the 'clean' button is pressed.
app.directive('formCleaner', function(){
return {
scope: true,
require: '^form',
link: function(scope, element, attr){
scope.clean = function () {
scope.namesForm.$setPristine();
};
scope.$watch('namesForm.$dirty', function(isDirty){
scope.namesForm.$setValidity('name', !isDirty);
});
}
};
});
HTML:
Then the only change to your HTML is to add the formCleaner directive.
So change your original HTML from this:
<body ng-controller="MainCtrl">
<form name="mainForm" submit="submit()">
<h3>My Editable List</h3>
<div ng-form="namesForm"
ng-repeat="name in names">
<!-- ... -->
</div>
<button class="btn btn-default" type="submit">Submit</button>
</form>
</body>
to this, by adding form-cleaner next to ng-form:
<body ng-controller="MainCtrl">
<form name="mainForm" submit="submit()">
<h3>My Editable List</h3>
<!-- Add the `form-cleaner` directive to the element with `ng-form` -->
<div form-cleaner
ng-form="namesForm"
ng-repeat="name in names">
<!-- ... -->
</div>
<button class="btn btn-default" type="submit">Submit</button>
</form>
</body>
Here is an updated Plunker showing the new behaviour: http://plnkr.co/edit/Lxem5HJXe0UCvslqbJr3?p=preview