Reloading ng-repeat data failed, what did I do wrong?

I like to reload an ng-repeat element after I process some data, but it failed. I like to know what I did wrong.

So the general process id that I load some data from "iframe.php" and then insert the data into a invisible div tag for jquery to map the data (in html format) into json format and save the json data into a variable called tableObject. And then I will use scope.$apply(scope.showCards) to push the data into my $scope.cards.

Here is my code:

var app = angular.module('rabbit', ['ngMaterial', 'ngMessages', 'ngMdIcons']),
    apiURL = 'iframe.php',
    tableObject = [];

$.ajax({
  url: "iframe.php",
  crossDomain: true,
  dataType: "html",
  success: function(data) {
    var json = data.substring(data.indexOf('<tr class = "pfrow2">') - 21);
    json = json.substring(0,json.indexOf('<td style="margin-top: 20px" colspan="2">'));
    json = json.substring(0,json.lastIndexOf('</td>') + 5);
    function widthChange() {
      if (json.indexOf('&width=130') != -1) {
        json = json.replace('&width=130','&width=300');
        widthChange();
      } else {
        // console.log(json);
        $('#json').html(json);
        var headers = ["name","kind","type","age","size","thumb","link"];
        tableObject = $("#json tr").map(function(i){
          var row = {};
          $(this).find('td').each(function(i){
            var rowName = headers[i];
            row[rowName] = $(this).text().trim();
          });
          $(this).find('td.legacy img').each(function(){
            var rowName = headers[5];
            row[rowName] = $(this).attr('src');
          });
          $(this).find('td.legacy a').each(function(){
            var rowName = headers[6];
            row[rowName] = $(this).attr('href');
          });
          return row;
        }).get();
        console.table(tableObject);
        $('#json').html('');
        var scope = angular.element($('#content')).scope();
        scope.$apply(scope.showCards);
      }
    }
    widthChange();
  },
  error: function() {
    console.log('error');
  },
});

app.controller('cardCtrl', function ($scope, $log, $mdDialog) {
  var showCards = function() {
    $scope.cards.push(tableObject);
  };
  $scope.cards = tableObject;
});

Here is the ng-repeat element in HTML:

  <div id="content" layout-sm="col" layout="row" layout-wrap ng-controller="cardCtrl">
    <md-card ng-repeat="card in cards" class="noselect" md-ink-ripple>
      <img src="{{card.thumb}}" alt="{{card.name}}">
      <h2>{{card.name}}</h2>
      <p>{{card.type}}</p>
      <p>{{card.age}}</p>
      <p>{{card.size}}</p>
      <a href="{{card.link}}"></a>
    </md-card>
  </div>

Answers:

Answer

It's abit hard to see what is going wrong exactly, but I'm guessing the tableObject gets reassigned to a different array instance: the controller is always binding that empty array you declared globally (which are quite evil).

There are several things you can do. Most easiest is to refactor the jquery statement to a factory method the controller can call.

app.factory('myAjaxThingy', function($q) {
  return function() {

      // Create a defer to async promise the consumer a result
      var defer = $q.defer();

      $.ajax({ 
        /* ... */
          success: function(data) {

            // Construct the array here

            var tableObject;

            /* ... */
            /* all that parsing magic goes here */
            /* ... */            

            // Resolve the promise
            // Note: no whacky angular.element().scope() and no scope.aplly()
            defer.resolve(tableObject);
          }
      });

      // Return the promise object
      return defer.promise;
  };
});

app.controller('MyController', function(myAjaxThingy) {

  myAjaxThingy().then(function(result) {
    $scope.cards = result;
  });

});

This way you can even re-execute the call if needed. Also note that angular has a pretty good $http service that can do the same as $.ajax.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.