javascript - 使用ng-change时如何在Angular js中修改dom属性？(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.(我正在尝试在上述dom中修改自定义属性，例如： dataid和dataurl 。)

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 .(我尝试使用事件，并考虑使用jquery库访问dom和最接近的目标，但是事件始终为undefined 。)

Is there a way I can access the attribute and modify it after http response.(有没有办法可以在http响应后访问该属性并对其进行修改。)

$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(UDPATE)

Changed to as per answer from @georgeawg:(更改为@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(UDPATE)

Adding this helped:(添加此帮助：)

$scope.$apply();

  ask by Nagendra Singh translate from so

Answer 1

Simply do ng-change="change(eachData)" , then modify the function:(只需执行ng-change="change(eachData)" ，然后修改函数：)

?$?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.(据申报是很重要的createWebHookCallback函数内部 $scope.change功能，使得它可以创建一个封闭eachData说法。)

It can not create a closure if it is outside the $scope.change function.(如果它在$scope.change函数之外 ，则无法创建闭包。)