Directive for Angular JS that creates a custom table

Question

Directive for Angular JS that creates a custom table

Working on a project that involves a significant amount of serial true/false data to be displayed in various ways. Developed a directive to pass in the model, table header, and an important aspect - the number of columns.

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

Struggling to make the columns parameter work as intended. Initially tried generating HTML in the link phase, but encountered difficulties with updating the model passed into the directive.

Check out the current state of the directive on this jsfiddle.

Any suggestions or ideas are greatly appreciated!

javascript angularjs angularjs-directive angularjs-scope angularjs-ng-repeat

Answer 1

Answer №1

If you're looking to keep track of changes in the model variable, what you need is a $scope.$watch function.

Here is your previous code snippet:

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

To update it, you can use the following:

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

For your convenience, here's the updated version on jsfiddle: http://jsfiddle.net/callado4/2tVAe/7/

Answer 2

If you're looking to keep track of changes in the model variable, what you need is a $scope.$watch function.

Here is your previous code snippet:

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

To update it, you can use the following:

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

For your convenience, here's the updated version on jsfiddle: http://jsfiddle.net/callado4/2tVAe/7/

Directive for Angular JS that creates a custom table

Answer №1

Similar questions

Adding information into sqlite from a json document

creating a randomized location within an HTML element using JavaScript

Update the value after verifying the element

Mastering the Art of Unit Testing JavaScript Asynchronous Code with Jasmine Mocking

When jQuery is used to move rows between tables, it can interfere with

Custom palette in Material UI design palette allows users to create

Exploring the parent scope in handlebars.js partials

Live JSON sign-up feature on site

Invoking the HTML method from a WCF service

Unable to trigger onSelect event on the datepicker component

Timer Tool: JavaScript Countdown Application

New data field is created with AngularFire2 update instead of updating existing field

Modifying script variables using the Chrome console

Utilizing component state or props within Redux mapDispatchToProps operations

Executing npm and ng commands via an Ant script on a Windows machine leads to the error message "The specified file could not be found."

Easily changing the state of a specific array item using React

Setting a dynamic ID attribute for a checkbox within a jQuery DataTable

achieve precise outcomes using mapping techniques

There seems to be an issue with Bookshelfjs and bcrypt hashPassword - it is functioning properly during the create

Tips for retaining the value of a variable in JavaScript