html - How to bind scope data to model that is generated dynamically using Javascript? -
the scenario have create dynamic table using javascript passing data passed script tag. javascript code parses provided json , generates table header , table body. table body generated along tags required angular binding method {{variable_name}}.
but after dom created need re-apply scope ng-repeat of table.
<html> <head> <title>dynamic table</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <script src="js/angular.min.js"></script> <script src="js/jquery.min.js"></script> <script type="text/javascript"> var orderbyfield = "impressions"; var reversesort = "false"; var mylist = [{firstname: 'john',lastname: 'doe',age: 30,etc : 'heelo'},{firstname: 'frank',lastname: 'burns',age: 54,etc: 'world'},{firstname: 'sue',lastname: 'banter',age: 21,etc: 'cool'},{firstname: 'frank',lastname: 'burns',age: 54,etc: 'world'},{firstname: 'frank',lastname: 'burns',age: 54,etc: 'world'},{firstname: 'frank',lastname: 'burns',age: 54,etc: 'world'},{firstname: 'frank',lastname: 'burns',age: 54,etc: 'world'},{firstname: 'frank',lastname: 'burns',age: 54,etc: 'world'},{firstname: 'frank',lastname: 'burns',age: 54,etc: 'world'},{firstname: 'frank',lastname: 'burns',age: 54,etc: 'world'},{firstname: 'frank',lastname: 'burns',age: 54,etc: 'world'},{firstname: 'frank',lastname: 'burns',age: 54,etc: 'world'},{firstname: 'frank',lastname: 'burns',age: 54,etc: 'world'},{firstname: 'frank',lastname: 'burns',age: 54,etc: 'world'},{firstname: 'frank',lastname: 'burns',age: 54,etc: 'world'}]; function addallcolumnheaders(mylist, selector) { var columnset = []; var headertr$ = $('<tr/>'); var astart = '<a href="#" ng-click="orderbyfield=\''; var amid = '\'; reversesort = !reversesort">'; var aend = '</a>'; (var = 0 ; < mylist.length ; i++) { var rowhash = mylist[i]; (var key in rowhash) { keylink = astart+key+amid+key+aend; if ($.inarray(key, columnset) == -1){ columnset.push(key); headertr$.append($('<th/>').html(keylink)); } } } $(selector).append(headertr$); return columnset; } function createangulartabledataplaceholder(mylist, selector) { var columnset2 = []; var headertr2$ = $('<tr/>').attr('ng-repeat','field in mylist|orderby:orderbyfield:reversesort'); var astart2 = '<td>{{field.'; var aend2 = '}}</td>'; (var = 0 ; < mylist.length ; i++) { var rowhash2 = mylist[i]; (var key2 in rowhash2) { keylink2 = astart2+key2+aend2; //alert(keylink); if ($.inarray(key2, columnset2) == -1){ columnset2.push(key2); headertr2$.append($('<td/>').html(keylink2)); } } } $(selector).append(headertr2$); return columnset2; } </script> </head> <body> <div class="container"> <section ng-app="app" ng-controller="mainctrl" ng-init="getmember(mylist)"> <table class="table" id="exceldatatable" border="1"> <thead id="thead"> </thead> <tbody id="tbody"> <!--tr ng-repeat="field in mylist|orderby:orderbyfield:reversesort"> </tr--> </tbody> </table> </section> </div> <script> var app = angular.module('app', []); app.controller('mainctrl', ['$scope', '$window', function($scope, $window) { addallcolumnheaders(mylist, '#thead'); createangulartabledataplaceholder(mylist, '#tbody'); console.log("header , columns done"); $scope.orderbyfield = $window.orderbyfield; console.log($scope.orderbyfield); $scope.reversesort = false; console.log($scope.reversesort); angular.element(document).ready(function () { $scope.mylist = $window.mylist; console.log("got "+$scope.mylist); }); }]); </script> </body> </html> the dom elements created - 
the current output getting - 
problem angular binds code @ rendering time. how can use $scope.watch method or $scope.apply method done after javascript done. trying using
angular.element(document).ready(function ())
but that's not correct way suppose.
new angular. please guide me. thanks!
you can bootstrap angular after dom tree rendered. remove ng-app section , put code @ end of first script:
var elem = document.queryselector('section'); angular.bootstrap(elem, 'app'); of course, use better way select element on want bind ng-app to
Comments
Post a Comment