Traverse, Append or prepend element inside the template ng-repeat

App Development
1

All the jQuery function I try to implement inside the ng-repeat doesn’t work as intended. It is ignoring JQuery traversing and DOM manipulation in anything inside ng-repeat. I know you are using AngularJS for the templating but we have limited access to override it using directives (or anything about Angular). What is the alternative workaround to customize the template programmatically?

2

Hi and thanks for posting this question here.

Instead of going into details about how we work with our front-end frameworks. Can you give me an example of what you’re trying to achieve?

Thanks

3

There too many customization that requires us to manipulate the DOM.

4

Like for instance: I want to get the h1 element and append to it. It works well in the browser but once you add it in the Javascript Tadabase tab, it won’t even get the element inside the ng-repeat

Here is the HTML markup:

<div class="row" ng-repeat="(rowIndex, row) in options.rows">
  <div class="col-md-12" ng-repeat="(colIndex, col) in row.cols">
     <div class="form-group" ng-repeat="(fieldIndex, column) in col.fields" id="field_block_field_52" ng-style1="columnStyle(column, item)" allow-inline-editing-for-app="" item="item" field="column" allow-edit="options.settings.allowInlineEdit == 'Yes' &amp;&amp; (!column.allowInlineEdit || column.allowInlineEdit=='Yes')" table-id="tableId" page-id="pageId">
        <h1>Change ME</h1>
     </div>
  </div>
</div>

JS:
var el = document.querySelector(‘h1’);
el.append(‘Test insert’)

5

we can’t DOM manipulate the fields inside the Data Component like List and Table

6

This is certainly possible but you do have to keep in mind that the components are loaded onto the DOM dynamically and you’ll have to make sure that your JavaScript that you add waits not only for the DOM to load but for the specific component you are adding or changing.

So, for example, you can add the following JavaScript (jQuery) to add the word “hello” after each tag inside the table with the id of “x_element_page_4_20”

var flag = false;
function checkFlag() {
    if(flag === false) {
        if ($('#x_element_page_4_20') !== undefined) {
            flag = true;
        }
       window.setTimeout(checkFlag, 100);
    } else {
        $('#x_element_page_4_20 table tr th').append('<br><span>hello</span>');
    }
}
checkFlag();

856×701 99.9 KB

7

Hi Chem! Thank you. It works!

8

It works fine in first load but it strips out all the DOM manipulation when you navigate to other page and return again to the modified page.

9

Hi Rose, I’m not experiencing the same behavior. If you don’t mind, can you please open a ticket or email support@tadabase.io and ask for me so we can work through this together? Thanks! :slight_smile: