Не удалось перезагрузить данные ng-repeat, что я сделал не так?
Я люблю перезагрузитьng-repeat
элемент после того, как я обработал некоторые данные, но это не удалось. Мне нравится знать, что я сделал не так.
Итак, общий идентификатор процесса: я загружаю некоторые данные из «iframe.php», а затем вставляю данные в невидимый тег div для jquery, чтобы отобразить данные (в формате html) в формат json и сохранить данные json в переменную с именемtableObject
, И тогда я буду использоватьscope.$apply(scope.showCards)
вставить данные в мой$scope.cards
.
Вот мой код:
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;
});
Здесьng-repeat
элемент в 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>