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.
Related
I'm currently maintaining an AngularJS application and need to have html inputs use the ngRequired directive. However these inputs do not use ngModel-- just straight up value to display the value dynamically and ngClick to popup a modal window that will eventually set the value in an object that is not bounded to a model. Seems like ngRequired only works when paired with ngModel in order for the submit button to reflect changes appropriately (like enable/disable).
I tried to work around not using ngRequired by manipulating the ngInvalid CSS which works great for showing the required fields-- however it does not bubble up to the submit button (disabling it if one or more required fields have no input). Is there a way to emulate ngRequired without using it explicitly in AngularJS?
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.
I am using ng-options to create a Select from an array of objects. This is working just fine, and for the purposes of this question, the content of the objects is somewhat unimportant, just suffice to say they have a name property, a value property, and a few other properties.
Below is the code that I'm using to create the Select, and so far it is working just fine.
Here's my question - when an option is selected, what gets bound to the ng-model is the "entire object" (fl). What I'd like to be bound to ng-model is just the "name" (i.itemName) part of the object.
I suppose I can fix this by going back after the fact, and when the submit button is pressed, I can loop through all data, find the bound object, extract the name from it and then change it so it's not bound to the name, but... that's rather sloppy and not really how it should be handled.
Is there a way to change this code so that when I select an item, ng-model is bound to i.itemName and not fl?
<select chosen
id="{{fl.fldBasic.fldLabel}}"
ng-model="fl.dataValue"
ng-readonly="{{fl.fldBasic.attrReadOnly}}"
title="{{fl.help}}"
ng-required="{{fl.required}}"
class="chosen-select"
ng-options="i.itemName for i in fl.combo_ItemList.itemList track by i.itemValue"
style="width: 100%;">
</select>
You may use the following code if you want to bound the ng-model to itemName. Do note that you need to remove track by here for it to work as it will evaluates to undefined and the model value will not match to any options.
i.itemName as i.itemName for i in fl.combo_ItemList.itemList.
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.
Here's a Plunkr: http://plnkr.co/edit/Vr3z4bxFmsiJPs1ye2Vd.
The ngRepeat directive adds an empty option at the top when ngIf is present on the first option element which is supposed to be default.
Is there anyway to avoid that?
I want to use ngRepeat, not ngOptions.
Thanks.
ng-model binds two-way, so you are trying to bind the selection to numbers instead of variables, and I don't know what exactly are you trying to do... but this is the cause of the problem