ng-click, row.add foydalanayotgan bo'lsangiz AngularJS va jquery dataTables bilan ishlamaydi

Angualrjs uchun yangi, jQuery DataTable direktivini angularJS bilan ishlaydigan yaxshi ishlayman. Muammo oldida JavaScript funktsiyasi "TR" ga ishlamaydigan "ng-click" bilan dinamik ravishda qo'shiladi. Dinamik ravishda qo'shilgan elementlar burchak tomonidan tan olinmagan kabi ko'rinadi.

Kimdir menga bu muammoni hal qilishga yordam berishi mumkinmi?

Stackoverflow-da ko'plab savollar bor va men allaqachon sinab ko'rgan yechim haqida gap bor, lekin aslida ishlamayapman, chunki row.add usulini jQuery usulini populyatsiyalash uchun ishlataman.

Iltimos, foydalanadigan kodni toping

angular.module('myApp', [])
.controller('myCtrl', ['$scope','$filter','$http', '$compile', function($scope, $filter, $http,$compile) {
    $scope.myFunc = function() {        
            $http.get('http://localhost:9999/Angular_web/rest/main_search/byaufnum/').
            then(function(response) {
                var mytable = $('#table1').DataTable();
                response.data.map(function(item) {
                    mytable.row.add([''+item.auftragsNr+'']);
                    $compile(mytable.row)($scope);
                })
                mytable.draw(false);
            }); 
    };

    $scope.getBGPdata = function(searchValue) {
        console.log('--> '+searchValue);
    };
}]);

Bu muammoni $ compile and $ scope dan foydalanish orqali hal qilish mumkinligini bilaman, lekin uni yuqoridagi kodga qanday kiritish kerakligini bilmayman.

enter image description here

Quyidagi jadvalni HTML formatida ko'rish mumkin

<tr role="row" class="odd"><td class="sorting_1">KRT-ZDK-PMN_NEU-WWT_loopback_SFV_1</td>
0
mytable.draw (false) dan keyin bu $ compile (mytable) ($ scope);
qo'shib qo'ydi muallif Jag, manba
DataTable-ni hech qanday xatosiz ko'rsatish mumkinmi? har qanday konsol xatosi?
qo'shib qo'ydi muallif Jag, manba
@Jag hali ham ishlamayapti.
qo'shib qo'ydi muallif prashant thakre, manba
Ha, men stolni hech qanday xatosiz ko'rishni xohlayman, men ekran tasvirini ham qo'shib qo'ydim.
qo'shib qo'ydi muallif prashant thakre, manba
@GangadharJannu ha ha HTML-kodni ham postga qo'shdim.
qo'shib qo'ydi muallif prashant thakre, manba
@GangadharJannu ha ha HTML-kodni ham postga qo'shdim.
qo'shib qo'ydi muallif prashant thakre, manba
@GangadharJannu ha ha HTML-kodni ham postga qo'shdim.
qo'shib qo'ydi muallif prashant thakre, manba
@GangadharJannu Agar row.add bu masalani keltirib chiqarsa, men ham taklifni ko'ra kodni o'zgartirishga tayyorman
qo'shib qo'ydi muallif prashant thakre, manba
@GangadharJannu Agar row.add bu masalani keltirib chiqarsa, men ham taklifni ko'ra kodni o'zgartirishga tayyorman
qo'shib qo'ydi muallif prashant thakre, manba
@GangadharJannu Agar row.add bu masalani keltirib chiqarsa, men ham taklifni ko'ra kodni o'zgartirishga tayyorman
qo'shib qo'ydi muallif prashant thakre, manba
@prashantthakre biz ko'rsatadigan jadval qatorining HTMLini ko'rsata olasizmi?
qo'shib qo'ydi muallif Gangadhar Jannu, manba
@ javob berishni tekshiring
qo'shib qo'ydi muallif Gangadhar Jannu, manba
@ javob berishni tekshiring
qo'shib qo'ydi muallif Gangadhar Jannu, manba
@ javob berishni tekshiring
qo'shib qo'ydi muallif Gangadhar Jannu, manba

6 javoblar

muammo DOM elementi bo'lmagan mytable derleniyor (DataTable misoli obyekti)

shuning uchun buni shunday qilish kerak

      var table = $('#table1');
      var mytable = table.DataTable();
      response.data.forEach(function(item) {
        mytable.row.add(['' + item.auftragsNr + '']);
      })
      mytable.draw(false);
      $compile(table)($scope);//here table not mytable

working example JSFIDDLE

EDIT -ni tanlang

DataTables faqat dastlab birinchi sahifani yaratadi, shuning uchun $ compile (table) ($ scope); faqatgina birinchi satr satrlarini tuzish paytida (ular hali yaratilmagan).

Bu muammoni bartaraf etish uchun, ularni DataTable-ga qo'shishdan oldin barcha satrlarni kompilyatsiya qilishingiz kerak

    success: function(data) {
      var mytable = table.DataTable();
      var tbody = $('<tbody></tbody>');
      data.forEach(function(item) {
        tbody.append('<tr><td>' + item.auftragsNr + '</td></tr>');
      })
     //compiling all rows under tbody
      $compile(tbody[0])($scope)
     //adding only trs from tbody to DataTable
      mytable.rows.add(tbody[0].children).draw(false);
    }

Shuningdek, bu erda yangilangan JSFIDDLE disk xotirasi bilan

2
qo'shib qo'ydi
javobimni yangiladim
qo'shib qo'ydi muallif Jag, manba
Linklar birinchi sahifada juda yaxshi ishlaydi, lekin keyingi sahifaga qaytib borganimda ishoratlar to'xtadi. Men sahifada 10 ta havola ko'rsataman, shuning uchun birinchi sahifa havolalari keyingi sahifani bosganimda ishlaydi, keyin keyingi sahifadagi yozuvlar ishlamaydi.
qo'shib qo'ydi muallif prashant thakre, manba
Zo'r, men juda ko'p kurash qildim, lekin bu menga tetiklantirmadi, hozirda ko'p ishlaganlarga rahmat.
qo'shib qo'ydi muallif prashant thakre, manba

muammo DOM elementi bo'lmagan mytable derleniyor (DataTable misoli obyekti)

shuning uchun buni shunday qilish kerak

      var table = $('#table1');
      var mytable = table.DataTable();
      response.data.forEach(function(item) {
        mytable.row.add(['' + item.auftragsNr + '']);
      })
      mytable.draw(false);
      $compile(table)($scope);//here table not mytable

working example JSFIDDLE

EDIT -ni tanlang

DataTables faqat dastlab birinchi sahifani yaratadi, shuning uchun $ compile (table) ($ scope); faqatgina birinchi satr satrlarini tuzish paytida (ular hali yaratilmagan).

Bu muammoni bartaraf etish uchun, ularni DataTable-ga qo'shishdan oldin barcha satrlarni kompilyatsiya qilishingiz kerak

    success: function(data) {
      var mytable = table.DataTable();
      var tbody = $('<tbody></tbody>');
      data.forEach(function(item) {
        tbody.append('<tr><td>' + item.auftragsNr + '</td></tr>');
      })
     //compiling all rows under tbody
      $compile(tbody[0])($scope)
     //adding only trs from tbody to DataTable
      mytable.rows.add(tbody[0].children).draw(false);
    }

Shuningdek, bu erda yangilangan JSFIDDLE disk xotirasi bilan

2
qo'shib qo'ydi
javobimni yangiladim
qo'shib qo'ydi muallif Jag, manba
Linklar birinchi sahifada juda yaxshi ishlaydi, lekin keyingi sahifaga qaytib borganimda ishoratlar to'xtadi. Men sahifada 10 ta havola ko'rsataman, shuning uchun birinchi sahifa havolalari keyingi sahifani bosganimda ishlaydi, keyin keyingi sahifadagi yozuvlar ishlamaydi.
qo'shib qo'ydi muallif prashant thakre, manba
Zo'r, men juda ko'p kurash qildim, lekin bu menga tetiklantirmadi, hozirda ko'p ishlaganlarga rahmat.
qo'shib qo'ydi muallif prashant thakre, manba

muammo DOM elementi bo'lmagan mytable derleniyor (DataTable misoli obyekti)

shuning uchun buni shunday qilish kerak

      var table = $('#table1');
      var mytable = table.DataTable();
      response.data.forEach(function(item) {
        mytable.row.add(['' + item.auftragsNr + '']);
      })
      mytable.draw(false);
      $compile(table)($scope);//here table not mytable

working example JSFIDDLE

EDIT -ni tanlang

DataTables faqat dastlab birinchi sahifani yaratadi, shuning uchun $ compile (table) ($ scope); faqatgina birinchi satr satrlarini tuzish paytida (ular hali yaratilmagan).

Bu muammoni bartaraf etish uchun, ularni DataTable-ga qo'shishdan oldin barcha satrlarni kompilyatsiya qilishingiz kerak

    success: function(data) {
      var mytable = table.DataTable();
      var tbody = $('<tbody></tbody>');
      data.forEach(function(item) {
        tbody.append('<tr><td>' + item.auftragsNr + '</td></tr>');
      })
     //compiling all rows under tbody
      $compile(tbody[0])($scope)
     //adding only trs from tbody to DataTable
      mytable.rows.add(tbody[0].children).draw(false);
    }

Shuningdek, bu erda yangilangan JSFIDDLE disk xotirasi bilan

2
qo'shib qo'ydi
javobimni yangiladim
qo'shib qo'ydi muallif Jag, manba
Linklar birinchi sahifada juda yaxshi ishlaydi, lekin keyingi sahifaga qaytib borganimda ishoratlar to'xtadi. Men sahifada 10 ta havola ko'rsataman, shuning uchun birinchi sahifa havolalari keyingi sahifani bosganimda ishlaydi, keyin keyingi sahifadagi yozuvlar ishlamaydi.
qo'shib qo'ydi muallif prashant thakre, manba
Zo'r, men juda ko'p kurash qildim, lekin bu menga tetiklantirmadi, hozirda ko'p ishlaganlarga rahmat.
qo'shib qo'ydi muallif prashant thakre, manba

Tekshiruvchilarda xizmat qo'ng'iroqlarini amalga oshirish va DOM manipulyatsiyasi qilish tavsiya etilmaydi.   Buning uchun factory/service/proider va direktivi dan foydalanishingiz mumkin.

Tasavvur qilmoqchimanki, masalan, mytable.row bilan qo'shilasiz, bu siz qo'shgan satr misollarini ushlab turmaydi. mytable.row (index) bo'lishi kerak.

Shuning uchun mytable.row derleme o'rniga barcha satrlarni qo'shing va jadvalni bir marta $ compile (angular.element ('# table1')) ($ scope); bilan kompilyatsiya qiling.

angular.module('myApp', [])
.controller('myCtrl', ['$scope','$filter','$http', '$compile', function($scope, $filter, $http,$compile) {
    $scope.myFunc = function() {        
            $http.get('http://localhost:9999/Angular_web/rest/main_search/byaufnum/').
            then(function(response) {
                var mytable = $('#table1').DataTable();
                response.data.map(function(item) {
                    mytable.row.add([''+item.auftragsNr+'']);
                });
                mytable.draw(false);
                $compile(angular.element('#table1'))($scope);
            }); 
    };

    $scope.getBGPdata = function(searchValue) {
        console.log('--> '+searchValue);
    };
}]);
1
qo'shib qo'ydi
Yo'q, u ishlamayapti, lekin Jag menga javob berdi, men uchun yaxshi ishlagan, sizning harakatingiz uchun rahmat, men xato qilardim $ compile ($ ('# table1')) ($ scope);
qo'shib qo'ydi muallif prashant thakre, manba
Yo'q, bu ishlamaydi, men ham ushbu variantni sinab ko'rdim, lekin hech qanday ish qilmadim.
qo'shib qo'ydi muallif prashant thakre, manba
@prashantthakre Men taklif qilgan o'zgartirish kodini tekshirdingiz. $ Yoki angular.element elementini tanlash o'xshash. Va sen aytgan so'zlarni xato deb aytdim
qo'shib qo'ydi muallif Gangadhar Jannu, manba
@prashantthakre sizda $ compile (angular.element ('# table1')) ($ scope) bilan tekshirib ko'rishingiz mumkin;
qo'shib qo'ydi muallif Gangadhar Jannu, manba

Tekshiruvchilarda xizmat qo'ng'iroqlarini amalga oshirish va DOM manipulyatsiyasi qilish tavsiya etilmaydi.   Buning uchun factory/service/proider va direktivi dan foydalanishingiz mumkin.

Tasavvur qilmoqchimanki, masalan, mytable.row bilan qo'shilasiz, bu siz qo'shgan satr misollarini ushlab turmaydi. mytable.row (index) bo'lishi kerak.

Shuning uchun mytable.row derleme o'rniga barcha satrlarni qo'shing va jadvalni bir marta $ compile (angular.element ('# table1')) ($ scope); bilan kompilyatsiya qiling.

angular.module('myApp', [])
.controller('myCtrl', ['$scope','$filter','$http', '$compile', function($scope, $filter, $http,$compile) {
    $scope.myFunc = function() {        
            $http.get('http://localhost:9999/Angular_web/rest/main_search/byaufnum/').
            then(function(response) {
                var mytable = $('#table1').DataTable();
                response.data.map(function(item) {
                    mytable.row.add([''+item.auftragsNr+'']);
                });
                mytable.draw(false);
                $compile(angular.element('#table1'))($scope);
            }); 
    };

    $scope.getBGPdata = function(searchValue) {
        console.log('--> '+searchValue);
    };
}]);
1
qo'shib qo'ydi
Yo'q, u ishlamayapti, lekin Jag menga javob berdi, men uchun yaxshi ishlagan, sizning harakatingiz uchun rahmat, men xato qilardim $ compile ($ ('# table1')) ($ scope);
qo'shib qo'ydi muallif prashant thakre, manba
Yo'q, bu ishlamaydi, men ham ushbu variantni sinab ko'rdim, lekin hech qanday ish qilmadim.
qo'shib qo'ydi muallif prashant thakre, manba
@prashantthakre Men taklif qilgan o'zgartirish kodini tekshirdingiz. $ Yoki angular.element elementini tanlash o'xshash. Va sen aytgan so'zlarni xato deb aytdim
qo'shib qo'ydi muallif Gangadhar Jannu, manba
@prashantthakre sizda $ compile (angular.element ('# table1')) ($ scope) bilan tekshirib ko'rishingiz mumkin;
qo'shib qo'ydi muallif Gangadhar Jannu, manba

Tekshiruvchilarda xizmat qo'ng'iroqlarini amalga oshirish va DOM manipulyatsiyasi qilish tavsiya etilmaydi.   Buning uchun factory/service/proider va direktivi dan foydalanishingiz mumkin.

Tasavvur qilmoqchimanki, masalan, mytable.row bilan qo'shilasiz, bu siz qo'shgan satr misollarini ushlab turmaydi. mytable.row (index) bo'lishi kerak.

Shuning uchun mytable.row derleme o'rniga barcha satrlarni qo'shing va jadvalni bir marta $ compile (angular.element ('# table1')) ($ scope); bilan kompilyatsiya qiling.

angular.module('myApp', [])
.controller('myCtrl', ['$scope','$filter','$http', '$compile', function($scope, $filter, $http,$compile) {
    $scope.myFunc = function() {        
            $http.get('http://localhost:9999/Angular_web/rest/main_search/byaufnum/').
            then(function(response) {
                var mytable = $('#table1').DataTable();
                response.data.map(function(item) {
                    mytable.row.add([''+item.auftragsNr+'']);
                });
                mytable.draw(false);
                $compile(angular.element('#table1'))($scope);
            }); 
    };

    $scope.getBGPdata = function(searchValue) {
        console.log('--> '+searchValue);
    };
}]);
1
qo'shib qo'ydi
Yo'q, u ishlamayapti, lekin Jag menga javob berdi, men uchun yaxshi ishlagan, sizning harakatingiz uchun rahmat, men xato qilardim $ compile ($ ('# table1')) ($ scope);
qo'shib qo'ydi muallif prashant thakre, manba
Yo'q, bu ishlamaydi, men ham ushbu variantni sinab ko'rdim, lekin hech qanday ish qilmadim.
qo'shib qo'ydi muallif prashant thakre, manba
@prashantthakre Men taklif qilgan o'zgartirish kodini tekshirdingiz. $ Yoki angular.element elementini tanlash o'xshash. Va sen aytgan so'zlarni xato deb aytdim
qo'shib qo'ydi muallif Gangadhar Jannu, manba
@prashantthakre sizda $ compile (angular.element ('# table1')) ($ scope) bilan tekshirib ko'rishingiz mumkin;
qo'shib qo'ydi muallif Gangadhar Jannu, manba
Angular Uzbekistan
Angular Uzbekistan
107 ishtirokchilar

Guruh Angular bo'yicha muloqot qilish uchun ochilgan Sizni qiziqtirsa: @nodejs_uz @react_uz @angular_uz @yiiframework_uz @js_uzb @typescript_uzb @vuejs_uz @ngTashkent @laravel_uz @uzdevgroup Ish o'rinlari @UzDev_jobs

Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb

ngTashkent
ngTashkent
77 ishtirokchilar

Правила просты: 1. Не хамить 2. Не хейтить 3. Реакт не нужен Ссылки: https://t.me/angular_ru - старший брат https://t.me/angular_uz - ангулар на узбекском @js_uzb @vuejs_uz @react_uz @nodejs_uz @yiiframework_uz @uzdevgroup @UzDev_Jobs @tasdev_talks