重装NG重复数据失败，我做了什么错？ [英] Reloading ng-repeat data failed, what did I do wrong?
问题描述
我喜欢我处理一些数据后，重新加载 NG-重复元素，但失败了。我想知道我做错了什么。
所以，我从iframe.php加载一些数据，然后一般的进程ID数据插入到一个无形的div标签的jQuery映射的数据（以HTML格式）转换成JSON格式并保存JSON数据成变量名为 tableObject 。然后，我将使用范围。$应用（scope.showCards）将数据推到我的 $ scope.cards
下面是我的code：
VAR应用= angular.module（'兔子'，['ngMaterial'，'ngMessages'，'ngMdIcons']）
apiURL ='iframe.php'，
tableObject = [];$阿贾克斯（{
网址：iframe.php
跨域：真实，
数据类型：HTML，
成功：功能（数据）{
VAR JSON = data.substring（data.indexOf（'＆LT; TR类=pfrow2＆GT;'） - 21）;
JSON = json.substring（0，json.indexOf（'＆LT; TD风格=的margin-top：20px的合并单元格=2＆GT;'））;
JSON = json.substring（0，json.lastIndexOf（'＆LT; / TD＆GT;'）+ 5）;
功能widthChange（）{
如果（json.indexOf（'和; WIDTH = 130'）！= -1）{
JSON = json.replace（'和; WIDTH = 130'，'和; WIDTH = 300'）;
widthChange（）;
}其他{
//执行console.log（JSON）;
$（'＃JSON）HTML（JSON）;
VAR标题= [名，种类，类型，年龄，大小，拇指，链接];
tableObject = $（＃JSON TR）。图（功能（我）{
VAR行= {};
$（本）.find（'TD'）。每个（函数（一）{
VAR rowName =标题[I]
。行[rowName] = $（本）的.text（）修剪（）;
}）;
$（本）.find（'td.legacy IMG'）。每个（函数（）{
变种rowName =报头[5];
行[rowName] = $（本）.attr（SRC）;
}）;
$（本）.find（'td.legacy一个'）。每个（函数（）{
变种rowName =报头[6];
行[rowName] = $（本）.attr（'href属性）;
}）;
返回行;
}）。得到（）;
console.table（tableObject）;
$（'＃JSON）HTML（''）。
VAR范围= angular.element（$（'＃内容））的范围（）。
。范围$申请（scope.showCards）;
}
}
widthChange（）;
}，
错误：函数（）{
的console.log（'错误'）;
}，
}）;app.controller（'cardCtrl'，函数（$范围，$日志$ mdDialog）{
VAR showCards =功能（）{
$ scope.cards.push（tableObject）;
};
$ scope.cards = tableObject;
}）;
下面是HTML中的 NG-重复元素：
＆LT; DIV ID =内容布局SM =山坳布局=行布局包NG控制器=cardCtrl＆GT;
＆LT; MD卡NG重复=牌牌级=noselectMD-墨纹波＆GT;
＆所述; IMG SRC ={{card.thumb}}ALT ={{card.name}}＆GT;
＆LT; H2＆GT; {{card.name}}＆LT; / H＆GT;
＆所述p为H.; {{card.type}}＆下; / P＆GT;
＆所述p为H.; {{card.age}}＆下; / P＆GT;
＆所述p为H.; {{card.size}}＆下; / P＆GT;
＆所述; A HREF ={{card.link}}＆GT;＆下; / A＆GT;
＆LT; / MD卡＆GT;
＆LT; / DIV＆GT;
这是升技很难看到究竟是什么会错了，但我猜 tableObject 得到重新分配到不同的数组实例：控制器始终绑定您全局声明空数组（这是相当邪恶）
有几件事情可以做。最简单的是重构jQuery的语句一个工厂方法的控制器可以调用。
app.factory（'myAjaxThingy'，函数（$ Q）{
返回功能（）{ //创建一个延迟到异步保证消费者的结果
变种延迟= $ q.defer（）; $阿贾克斯（{
/ * ... * /
成功：功能（数据）{ //此处构建阵列 VAR tableObject; / * ... * /
/ *所有的解析魔高一尺这里* /
/ * ... * / //解决的承诺
//注意：没有怪诞angular.element（）的范围（），并没有scope.aplly（）。
defer.resolve（tableObject）;
}
}）; //返回对象的承诺
返回defer.promise;
};
}）;app.controller（'myController的'，函数（myAjaxThingy）{ myAjaxThingy（）。然后（功能（结果）{
$ scope.cards =结果;
}）;}）;
这样如果需要的话，你甚至可以重新执行呼叫。还要注意的是角有一个pretty好 $ HTTP 服务，可以做同样的 $。阿贾克斯。
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>
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.
这篇关于重装NG重复数据失败，我做了什么错？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
