Question

我是Angle的新手，我发现它非常好，我的问题是：

当抓住变量javascript的数据源时，

有一个ng-repeat直接运行：

var alertsq = [  

{  
    "alert":"mediun",
    "nt":"28",
    "nu":"28",
    "no":"34",
    "dtini":"2012/Jul/23",
    "no":"3",
    "dtoc":"23/7/2012",
    "dtuo":"25/7/2012",
    "id":"227529436529033216",
    "msg":"Uh oh, this could be bad. Check the door lock vendor before you book you next hotel room: http://example.co/n56emZf2"
},
{  
    "alert":"mediun",
    "nt":"28",
    "nu":"28",
    "no":"34",
    "dtini":"2012/Jul/23",
    "no":"3",
    "dtoc":"23/7/2012",
    "dtuo":"25/7/2012",
    "id":"227529436529033216",
    "msg":"Uh oh, this could be bad. Check the door lock vendor before you book you next hotel room: http://example.co/n56emZf2"
}];

我的控制器在范围内采用变量 alertsq 和箭头，如下所示：

app.controller("alertsController",function(){    
console.log(alertsq);
this.alerts =alertsq;
});

很酷的是它工作正常，*ng-repeat*中的列表填充得很漂亮，但是当我使用 $ http 加载文件的JSON内容时，它不符合相同的list：O控制器代码如此：

app.controller("alertsController", function($http,$scope){    

$http({
url: "data/alerts.json",
dataType: "json",
method: "GET",
headers: {
    "Content-Type": "application/json"
   } 
}).success(function(data){
$scope.alerts= data;
console.log($scope.alerts);
}).error(function(error){
console.log(data);
console.log(error);
});
});

很酷的是，JSON在第一种情况下正好适合浏览器输出列表填写如下：

mainController controller.js:7


 [Object, Object, Object, Object, Object, Object, Object]
     0: Object
     $$hashKey:"object:4" 
     alert: "mediun"
     dtini: "2012/Jul/23"
     dtoc: "23/7/2012"    
     dtuo: "25/7/2012"
     id: "227529436529033216"
     msg: "Uh oh, this could be bad. Check the              
     door lock vendor before you book you next hotel room:       
     http://example.co/n56emZf2"
     no:"3"    
     nt: "28"
     nu: "28"__proto__: 
    Object1: 
    Object2:

当我寻找$ http JSON时，这是控制台输出：

 [Object, Object, Object, Object, Object, Object, Object]
 0: Object 
 alert: "mediun"
 dtini: "2012/Jul/23"
 dtoc: "23/7/2012"    
 dtuo: "25/7/2012"
 id: "227529436529033216"
 msg: "Uh oh, this could be bad. Check the              
 door lock vendor before you book you next hotel room:       
 http://example.co/n56emZf2"
 no:"3"    
 nt: "28"
 nu: "28"__proto__: 
Object1: 
Object2:

细节是JSON通过$ http获得的输出没有属性$$ HashKey，因此ng-repeat中的列表没有填充:(，任何人都可以帮我解决这个问题吗？

Answer 1

当您更新控制器构造函数以包含$http时，您还添加了$scope。由于多种原因，从inferred to explicit dependency injection更改可能是个问题。

例如，以下html将使用原始控制器显示警报。

<div ng-controller="CtrlOne as vm">
  <div ng-repeat="alert in vm.alerts">
    {{alert.alert}} - {{alert.msg}}
  </div>
</div>

但是，您更新的控制器（明确注入$scope）无法使用"controller as" syntax。必须删除控制器别名才能与新的控制器构造函数兼容：

<div ng-controller="CtrlOne">
  <div ng-repeat="alert in alerts">
    {{alert.alert}} - {{alert.msg}}
  </div>
</div>

以下是两种方法的演示：http://plnkr.co/edit/TrTFV36kQ8Llz3n2NChB?p=preview

或者，您可以从依赖项注入中删除$scope，然后返回使用控制器中的this.alerts。

难以阅读JSON并添加ng-repeat列表未完成$ http $$ HashKey

1 个答案: