Question

这是我的控制者：

'use strict';

/* Controllers */

function roles($scope, $http) {
    delete $http.defaults.headers.common['X-Requested-With']
  $http.get('/engine/ListRoles').success(function(data) {
    $scope.roles = data;
  });

  $scope.orderProp = 'id';
}

这是我从/engine/ListRoles/

获得的JSON响应

data: "[{"External":false,"Filter":"","ID":25,"Name":"content editor","Permissions":[{"Description":"test","Group":"report","ID":2,"Name":"view"},{"Description":"test","Group":"report","ID":4,"Name":"delete"},{"Description":"test","Group":"report","ID":3,"Name":"edit"},{"Description":"test","Group":"report","ID":5,"Name":"customize"},{"Description":"test","Group":"manage","ID":1,"Name":"access"}]},{"External":false,"Filter":"","ID":26,"Name":"data editor","Permissions":[{"Description":"test","Group":"manage","ID":1,"Name":"access"},{"Description":"test","Group":"manage","ID":6,"Name":"cache"},{"Description":"test","Group":"report","ID":5,"Name":"customize"},{"Description":"test","Group":"report","ID":4,"Name":"delete"},{"Description":"test","Group":"report","ID":3,"Name":"edit"},{"Description":"test","Group":"report","ID":2,"Name":"view"}]},{"External":false,"Filter":"","ID":27,"Name":"guest","Permissions":[]},{"External":false,"Filter":"","ID":2,"Name":"super user","Permissions":[{"Description":"test","Group":"manage","ID":1,"Name":"access"},{"Description":"test","Group":"report","ID":2,"Name":"view"},{"Description":"test","Group":"report","ID":3,"Name":"edit"},{"Description":"test","Group":"report","ID":4,"Name":"delete"},{"Description":"test","Group":"manage","ID":6,"Name":"cache"},{"Description":"test","Group":"report","ID":5,"Name":"customize"}]},{"External":false,"Filter":"","ID":1,"Name":"user","Permissions":[{"Description":"test","Group":"report","ID":2,"Name":"view"},{"Description":"test","Group":"report","ID":5,"Name":"customize"}]}]"
resultcode: "200"
resulttext: ""
timestamp: "/Date(1369497355200+0300)/"

但是，当我尝试使用此ng-repeat时：

<div id="table" ng-controller="roles">
      <div>
            <div ng-repeat="role in roles.data">
               {{role.Name}}<br />
            </div>
      </div>
</div>

我刚收到一大堆空白DIV。

Answer 1

如果您提供的响应实际上是从您的服务器返回的，那么这不是有效的JSON代码。您可以在此处查看规范：http://www.ietf.org/rfc/rfc4627.txt。

它声明JSON是一个序列化的对象或数组。因此，您返回的数据必须是对象或数组。此外，属性必须包含在双引号中。这与JavaScript不同，其中也可以定义属性名称而不将它们包装成双引号。返回以下内容，它将起作用：

{
"data": [{"External":false,"Filter":"","ID":25,"Name":"content editor","Permissions":[{"Description":"test","Group":"report","ID":2,"Name":"view"},{"Description":"test","Group":"report","ID":4,"Name":"delete"},{"Description":"test","Group":"report","ID":3,"Name":"edit"},{"Description":"test","Group":"report","ID":5,"Name":"customize"},{"Description":"test","Group":"manage","ID":1,"Name":"access"}]},{"External":false,"Filter":"","ID":26,"Name":"data editor","Permissions":[{"Description":"test","Group":"manage","ID":1,"Name":"access"},{"Description":"test","Group":"manage","ID":6,"Name":"cache"},{"Description":"test","Group":"report","ID":5,"Name":"customize"},{"Description":"test","Group":"report","ID":4,"Name":"delete"},{"Description":"test","Group":"report","ID":3,"Name":"edit"},{"Description":"test","Group":"report","ID":2,"Name":"view"}]},{"External":false,"Filter":"","ID":27,"Name":"guest","Permissions":[]},{"External":false,"Filter":"","ID":2,"Name":"super user","Permissions":[{"Description":"test","Group":"manage","ID":1,"Name":"access"},{"Description":"test","Group":"report","ID":2,"Name":"view"},{"Description":"test","Group":"report","ID":3,"Name":"edit"},{"Description":"test","Group":"report","ID":4,"Name":"delete"},{"Description":"test","Group":"manage","ID":6,"Name":"cache"},{"Description":"test","Group":"report","ID":5,"Name":"customize"}]},{"External":false,"Filter":"","ID":1,"Name":"user","Permissions":[{"Description":"test","Group":"report","ID":2,"Name":"view"},{"Description":"test","Group":"report","ID":5,"Name":"customize"}]}],
"resultcode": "200",
"resulttext": "",
"timestamp": "/Date(1369497355200+0300)/"
}

你得到一堆div的原因是你的ng-repeat指令实际上迭代了一个字符串的字符。你得到一个字符串，因为AngularJS没有将响应转换为对象，因为JSON不是有效的JSON。

要检查您是否拥有有效的JSON，可以在JavaScript控制台（例如Firebug）中使用JSON.parse（）对其进行解析。

Answer 2

http://jsfiddle.net/uZWQY/37/ 有两种日期格式的角度指令示例。一个是日期格式化程序，另一个是处理格式化为Microsoft Json日期的$ scope元素：/ Date（1369980188993）/

“Epoch”中的日期格式现已修复为Micorost .Net 4.5 MVC JavascriptSerializer。包括TheHansleMan在内的许多人感受到的痛苦现在减少了：如何在Henrik的博客上将序列化器换成JSON.NET http://blogs.msdn.com/b/henrikn/archive/2012/02/18/using-json-net-with-asp-net-web-api.aspx

Angular Solution（没有“作弊”并将日期重新格式化为服务器上的字符串）：

HTML

<input type="text" size="35" ng-model="testTime" jsondate='dd/MM/yyyy'>

使用Javascript：myApp.directive('jsondate', function (dateFilter) { return { require:'ngModel', link:function (scope, elm, attrs, ctrl) { var dateFormat = 'dd/MM/yyyy'; ctrl.$formatters.unshift(function (modelValue) { var newDate = new Date(parseInt(modelValue.replace("/Date(", "").replace(")/", ""), 10)); ctrl.$setValidity('jsondate', true); return dateFilter(newDate, dateFormat); }); } }; });

注意：只能在外部重复播放。您必须执行“长”指令格式才能使其正常工作：http://docs.angularjs.org/guide/directive

AngularJS - ng-repeat中的项目数据未显示，但ng-repeat正在重复空白div

2 个答案: