Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

is ng-model allowed inside <td> element of a table?

Tags:

angularjs

Is ng-model allowed inside element of a table? Will angular automatically update the model if I change a particular column(i.e. view)?

like image 782
Pratz Avatar asked Aug 17 '13 23:08

Pratz


People also ask

Can we use NG-model for Div?

NgModel expects the bound element to have a value property, which div s don't have. That's why you get the No value accessor error. I don't know if the input event is supported on all browsers for contenteditable . You could always bind to some keyboard event instead.

What is [( NgModel )] used for?

The ng-model directive binds the value of HTML controls (input, select, text-area) to application data. It is a part of the FormsModule. This directive is used by itself or as part of a larger form. It accepts a domain model as an optional Input.

What is [( NgModel )]?

Angular NgModel is an inbuilt directive that creates a FormControl instance from the domain model and binds it to a form control element. The ngmodel directive binds the value of HTML controls (input, select, textarea) to application data. We can merely achieve it in the component element and the HTML element both.


2 Answers

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

like image 182
Michael Low Avatar answered Sep 22 '22 13:09

Michael Low


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.

like image 36
BoxerBucks Avatar answered Sep 19 '22 13:09

BoxerBucks