我对AngularJS很陌生。
这是我的 HTML:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html ng-app="Resource">
<head runat="server">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="JS/controller.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<div ng-controller="ResourcesCtrl">
<form id="form1" runat="server">
<div>
<table>
<thead>
<tr>
<th>
Name
</th>
<th>
Value
</th>
<th>
Comment
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="resource in resources">
<td>
{{resource.KeyName}}
</td>
<td>
{{resource.Text}}
</td>
<td>
{{resource.Comment}}
</td>
<td>
<span>Update</span>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</body>
</html>
这是我的 JS:
var myModule = angular.module('Resource', []).factory('ResourceData', function($http) {
return {
getResources: function(prmLangId) {
//return the promise directly.
return $http.get('Default.aspx/GetResources', { langId: prmLangId }).
then(function(result) {
//resolve the promise as the data
console.log(result);
return result.data;
});
}
}
});
myModule.config(function($httpProvider) {
$httpProvider.defaults.headers.get = {};
$httpProvider.defaults.headers.get["Content-Type"] = "application/json; charset=utf-8";
});
function ResourcesCtrl($scope, ResourceData) {
$scope.resources = ResourceData.getResources(1033);
}
这是服务器方法:
[WebMethod]
public static string GetResources(int langId)
{
ResourcesManagerBL resBl = new ResourcesManagerBL(langId);
var resources = resBl.GetResourcesForLanguage(langId);
return Json.ToJson(resources);
}
结果是许多空白行(作为资源的数量),我做错了什么,在控制台中数据看起来不错。
结果是这样的: