How to modify dom attributes in Angular js when using ng-change?

Question

<table class="table table-sm table-inverse table-responsive table-striped">
    <thead>
    <tr>
        <th>SL No.</th>
            <th>Repository Name</th>
        <th>Active</th>
    </tr>
    </thead>
    <tr ng-repeat="eachData in lstRepositoryData">
        <td>{{$index + 1}}</td>
        <td>{{eachData.repositoryName}}</td>
        <td>
            <label class="switch">
                <input id="activeRepositorySlider"
                       ng-if="eachData.active == true" type="checkbox"
                       checked ng-model="eachData.active"
                       ng-change='change(eachData.active,"{{eachData.repositoryName}}")'
                       dataid="{{eachData.webHookId}}"
                       dataurl="{{eachData.webHookUrl}}">
                <input id="inactiveRepositorySlider"
                       ng-if="eachData.active == false" type="checkbox"
                       ng-model="eachData.active"
                       ng-change='change(eachData.active, "{{eachData.repositoryName}}")'
                       dataid="{{eachData.webHookId}}"
                       dataurl="{{eachData.webHookUrl}}">
                <span class="slider round"></span>
            </label>
        </td>
    </tr>
</table>

I am trying to modify the custom attributes like : dataid and dataurl in the above dom. I tried using the events and thought of using jquery library to access the dom and the closest target, but event always comes as undefined.

Is there a way I can access the attribute and modify it after http response.

$scope.change = function (enabled, repositoryName) {
    var popMessage = '';
    if (enabled) {
        popMessage = 'Enabling this will add a WEBHOOK to this repository. Do you want to continue?'
    } else {
        popMessage = 'Disabling this will delete the WEBHOOK from this repository. Do you want to continue?'
    }
    iziToast.question({
        timeout: false,
        pauseOnHover: true,
        close: false,
        overlay: true,
        toastOnce: true,
        backgroundColor: '#009edb',
        id: 'question',
        zindex: 999,
        title: 'Hey',
        message: popMessage,
        position: 'center',
        buttons: [
            ['<button><b>YES</b></button>', function (instance, toast) {
                instance.hide({
                    transitionOut: 'fadeOut'
                }, toast, 'button');
                var data = {
                    active: enabled,
                    repositoryName: repositoryName,
                    owner: localStorage.getItem('githubOwner')
                };
                $http.post("/modifyRepository", data).then(modifyRepositoryCallback, modifyRepositoryErrorCallback);
            },
                true],
            ['<button>NO</button>', function (instance, toast) {
                instance.hide({
                    transitionOut: 'fadeOut'
                }, toast, 'button');
            }],]
    });
};

function modifyRepositoryCallback(response) {
    if (response.status === 200) {
        $http.post("/createWebHook", response.data).then(createWebHookCallback, createWebHookErrorCallback);
    }
}

function modifyRepositoryErrorCallback(error) {
}

function createWebHookCallback(response) {
    // Here Can I access the particular html node and access the custom attribute and modify them.
    console.log(response);
}

function createWebHookErrorCallback(error) {
    console.log(error);
}

UDPATE

Changed to as per answer from @georgeawg:

$scope.change = function (eachData) {
    var popMessage = '';
    if (eachData.active) {
        popMessage = 'Enabling this will add a WEBHOOK to this repository. Do you want to continue?'
    } else {
        popMessage = 'Disabling this will delete the WEBHOOK from this repository. Do you want to continue?'
    }
    iziToast.question({
        timeout: false,
        pauseOnHover: true,
        close: false,
        overlay: true,
        toastOnce: true,
        backgroundColor: '#009edb',
        id: 'question',
        zindex: 999,
        title: 'Hey',
        message: popMessage,
        position: 'center',
        buttons: [
            ['<button><b>YES</b></button>', function (instance, toast) {
                instance.hide({
                    transitionOut: 'fadeOut'
                }, toast, 'button');
                var data = {
                    active: eachData.active,
                    repositoryName: eachData.repositoryName,
                    owner: localStorage.getItem('githubOwner')
                };
                $http.post("/modifyRepository", data).then(function (response) {
                    if (response.status === 200) {
                        $http.post("/createWebHook", response.data).then(function (response) {
                                eachData.webHookId = response.data.id;
                                eachData.webHookUrl = response.data.url;
                            }, function (error) {
                                console.log(error);
                            }
                        );
                    }
                }, function (error) {
                });
            },
                true],
            ['<button>NO</button>', function (instance, toast) {
                instance.hide({
                    transitionOut: 'fadeOut'
                }, toast, 'button');
                eachData.active = !eachData.active;
            }],]
    });
};

Works perfectly, strangely, this part still does not work:

eachData.active = !eachData.active;

UDPATE

Adding this helped:

$scope.$apply();

georgeawg · Accepted Answer · 2019-12-01 00:26:47Z

1

Simply do ng-change="change(eachData)", then modify the function:

̶$̶s̶c̶o̶p̶e̶.̶c̶h̶a̶n̶g̶e̶ ̶=̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶ ̶(̶e̶n̶a̶b̶l̶e̶d̶,̶ ̶r̶e̶p̶o̶s̶i̶t̶o̶r̶y̶N̶a̶m̶e̶)̶ ̶{̶
$scope.change = function (eachData) {
    var enabled = eachData.active;
    var repositoryName = eachData.repositoryName;

    //...

    function createWebHookCallback(response) {
        console.log(response);
        // Here Can I access the particular html node and access the
        // custom attribute and modify them.
        eachData.webHookId = <<function of response>>;
        eachData.webHookUrl = <<...>>;
    }
};

It is important to declare the createWebHookCallback function inside the $scope.change function so that it can create a closure with the eachData argument. It can not create a closure if it is outside the $scope.change function.

answered Dec 1, 2019 at 0:26

georgeawg

49k13 gold badges78 silver badges98 bronze badges

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

2 Comments

Nagendra Singh Over a year ago

While this works perfectly, but somehow when pressing NO I am also setting eachData.active = !eachData.active; so that the slider moves back to its original position when user clicks NO, that does not work. Updated the snippet above.

Nagendra Singh Over a year ago

Adding this helped , I thought this would have been internally applied $scope.$apply();

Collectives™ on Stack Overflow

How to modify dom attributes in Angular js when using ng-change?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related