I am binding an object from my controller on a directive in that controller. I can update fields from the directive on ngModel, however I cant seem to add or delete items from an existing property of type Array on that ngModel. It doesnt reflect on the value assigend to ngModel on the controller.
Editing a simple (existing) property of type Number or String is possible.
Could use some guidance on this.
If you could show some of your code, it would be helpful. However, from what you describe, I suspect it might be possible that you are not referencing either the array or the elements in the array correctly.
Related
I'm building a questionnaire out of directives which show the correct input based on certain expectations. Those expectations (including any formerly given input from the user) comes from a parent $scope. Everything is set up in the link function of AngularJS's directive definition object
Where things go wrong is when using md-checkbox: the ng-model of the checkbox inside the directive is set to true, the md-checkbox is still false. I can confirm that by adding a simple input type="checkbox" with the same ng-model property, the simple checkbox is checked, whereas the md-checkbox isn't.
Whenever I click on the md-checkbox twice, it does get checked. So I gather that there is something wrong with the binding. I built a CodePen which demonstrates it. The code inside the pen is almost taken verbatim from my source code
Stuff that I already tried:
Using $scope.$apply() after handling all (DOM) logic in the link function
Idem but with $scope.$digest()
Setting a $timeout with no delay (as way of a 'safe' $apply())
Even going so far as to store the current answer (true or false) in a variable, setting the ng-model property to undefined, and then setting it back to the stored value, all inside a $timeout
I'm at loss here, it looks like something simple given the fact that all the other inputs have their correct data in it.
Replace class with ng-class because ng-class lets you to dynamically bind the class to the element
Depending on your codepen the problem is class="md-checkbox-{{expression}}". I forked your codepen. You can use ng-class. I think this is a bug.
The question is clear I guess. I want to be informed after an ng-model binding is completed and the value is reflected to the DOM element.
I am aware that this can't be done for all ng-model bindings in a document.ready fashion but I would like to be informed at least for a particular element after DOM binding is done.
Why would I need it? To solve this problem with Bootstrap Material Design theme: https://github.com/FezVrasta/bootstrap-material-design/issues/194
Any idea please?
you can use a $watch on the variable which is binded to ng-model
work around
$timeout is executed when all the DOM manipulation is done , this assures that changes of your model have been reflected in the DOM
I have ng-repeat with items from my scope. Each row has a checkbox. When I click on the button which is outside ng-repeat it should call function from controller and from there I need to know know which checkboxes were selected and get their original scope values. I'm able to get selected checkboxes within controller with
$("input:checkbox:checked")
but how can I access it's original scope values (for rows which were selected)?
Thank you in advance.
Never do DOM manipulation in your controller.
The better ways would be
to add items in an array within your controller on selecting, and then on button-click, process the items in the array via a controller method, or
Set a boolean property on each item to true on selection, and then on button-click, process items with that boolean property set to true.
If you give us a jsFiddle for your situation, I or somebody else can give you more details.
Here is a fiddle http://jsfiddle.net/e6NPw/1/
I have a $scope.selected object on the scope and I keep the ids as keys. After that in your function outside your ng-repeat you can pretty much do anything you want, I just make an array of objects like the $scope.results but only with the selected ones.
Is ng-model allowed inside element of a table? Will angular automatically update the model if I change a particular column(i.e. view)?
If you are making the table cells directly editable using the HTML contenteditable attribute, ng-model won't work automatically as by default it's only for form elements.
It is possible to make it work with contenteditable though. There is an working example of how to do it on the angular website at http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController
ng-model is allowed wherever typical form elements exist that can use the directive (input, select and textarea)
One thing I will say about ng-model that can make it a bit tricky is that you will want to bind ng-model to a property of an object rather than just a simple scope variable. I have run into several instances where I bind $scope.foo to ng-model and use it in an input control. Then, if you clear the input field, the binding is lost and it stops updating the variable. Use something like $scope.fooObj.modelProp where fooObj is an object and it will work fine.
I have very big form (~500 controls) and want to integrate AngularJS on it. I have one problem, when I'm setting ng-model property it resets my value property.
Is there any way to automatically set model values from input values properties (textareas and selects), without messing with controller code?
You can use "ng-init"
<input ng-model="data.instructions" ng-init="data.instructions='bla bla'">
But still, the recommended way is using a controller.
Hope it helps.