前台代码
@{
Layout = null;
}
<!doctype html>
<html ng-app>
<head>
<title></title>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function my_controller($scope) {
$scope.students = [
{ Id: 1, Name: '张一' },
{ Id: 2, Name: '李二' },
{ Id: 3, Name: '王三' },
{ Id: 4, Name: '马四' },
{ Id: 5, Name: '鬼五' }
];
$scope.test = function () {
$.ajax({
type: 'GET',
url: '/api/Values/GetStudent',
success: function (data) {
$scope.students = data;
$scope.$apply();
},
error: function (msg) {
alert(msg.responseText);
}
});
}
}
</script>
</head>
<body ng-controller="my_controller">
<table>
<tr>
<th>id</th>
<th>name</th>
</tr>
<tr ng-repeat="item in students">
<td>{{item.Id}}</td>
<td>{{item.Name}}</td>
</tr>
</table>
<input type="button" value="test" ng-click="test();" />
</body>
</html>
if ($scope.$root.$$phase != '$apply' && $scope.$root.$$phase != '$digest') {
$scope.$apply();
}
后台代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
namespace MvcApplication16.Controllers
{
public class ValuesController : ApiController
{
/// <summary>
/// GET /api/Values/GetStudent
/// </summary>
/// <returns></returns>
[HttpGet]
public List<Student> GetStudent()
{
List<Student> items = new List<Student>();
items.Add(new Student(1, "张三"));
items.Add(new Student(2, "李四"));
items.Add(new Student(3, "王五"));
return items;
}
}
public class Student
{
public Student() { }
public Student(int _id, string _name)
{
this.Id = _id;
this.Name = _name;
}
private int id;
public int Id
{
get { return id; }
set { id = value; }
}
private string name;
public string Name
{
get { return name; }
set { name = value; }
}
}
}