Angular JS custom table directive

Question

In the project I am working on I have a lot of serial true/false data that needs to be displayed in different ways. I have been working on a directive that will allow me to pass in the model, the table header, and heres the tricky part, number of columns.

<serial-checkbox-table title="Title" columns="2" ng-model="items"></serial-checkbox-table>

I cant seem to get the columns parameter to be respected. I built this thing at one point where the html was generated in the link phase but I was having a hard time updating the model that was passed into the directive.

heres a jsfiddle of the current state of the directive.

http://jsfiddle.net/peledies/2tVAe/

Anyone have any ideas?

What exactly do you expect the columns variable to do? I updated your jsfiddle to properly output the ending </td></tr> but I'm not sure if this what you want. See here: jsfiddle.net/callado4/2tVAe/3 — JoseM
– JoseM, Commented Mar 10, 2014 at 17:32
i would expect the columns parameter to let me specify how many colums the table has. if i say columns='2' i should have 2 cells then a new row. If i say columns='3' i should have 3 cells and then a new row. — Deac Karns
– Deac Karns, Commented Mar 10, 2014 at 18:08
You aren't even using the columns parameter to create the cells. I see that the colspan in the header row is being set correctly. When you have more than 2 columns, do you just want the other cells to be empty? — JoseM
– JoseM, Commented Mar 10, 2014 at 18:19
I think this is a more accurate example of how I intend to use this directive jsfiddle.net/peledies/2tVAe/6 it works but when I click the 'update model' button i want the table to be recompiled. and it doesnt do that. thats why i went with the ngrepeat template, because it would redraw the table when the data changed. — Deac Karns
– Deac Karns, Commented Mar 10, 2014 at 19:20

JoseM · Accepted Answer · 2014-03-10 22:11:20Z

1

What you need is a $scope.$watch on the model variable.

Here is your old cold:

var model = $scope.$eval($attrs.ngModel);
...
// compile and write to dom

Needs to updated to

$scope.$watch($attrs.ngModel,function(newVal,oldVal) {
    //var model = $scope.$eval($attrs.ngModel);
    // can just take model value from watch function result
    var model = newVal;
    ...
    // compile and write to dom
});

And here is your jsfiddle updated with this logic: http://jsfiddle.net/callado4/2tVAe/7/

edited Mar 10, 2014 at 22:11

answered Mar 10, 2014 at 18:50

JoseM

4,3022 gold badges26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular JS custom table directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related