使用AngularJs从数据库中进行数据检索和文件传输

Question

我正在努力学习并与AngularJs一起工作。最后制作了一个样本但无法从数据库中检索数据。我正在尝试过滤产品数据并尝试以下方法：

ASP.NET MVC控制器：

DemoEntities db = new DemoEntities();
public JsonResult GetProducts()
{
   var result = db.Products.ToList();
   return Json(result, JsonRequestBehavior.AllowGet);
}

ProductClient.js ：已更新

var ProductApp = angular.module('ProductApp', []); //Created the module

ProductApp.controller('ProductController', function ($scope, ProductService) { //The controller here
    $scope.Product = null;

    ProductService.GetProducts().then(function (d) { //No parameter passed here
        $scope.Product = d.data; 
    }, function () {
        alert('Failed');
    });
});

ProductApp.factory('ProductService', function ($http) { //The product service
    var factory = {};

    factory.GetProducts = function () {
        return $http.get('/Products/GetProducts'); //The ASP.NET MVC controlled defined
    }
    return factory;
});

Index.cshtml ：

@{
    ViewBag.Title = "Tutorial - AngularJs";
}

@section scripts{

    <script src="~/Scripts/angular.js"></script>
    <script src="~/AngularFile/ProductClient.js"></script>
}

<h2>Home</h2>
<div ng-app="ProductApp" class="container">
    <br />
    <br />
    <input type="text" class="input-lg" placeholder="Search Product" ng-model="searchProduct" />
    <br />
    <div ng-controller="ProductController">
        <table class="table">
            <tr>
                <td>{{ Product.ProductName }}</td>
                <td>{{ Product.Details }}</td>
                <td>{{ Product.Price }}</td>
                <td>{{ Product.Stock }}</td>
            </tr>
        </table>
    </div>
</div>

下面是示例项目的屏幕截图，它没有显示任何内容。我错过了什么，无法理解？

注意：抱歉问这个新手问题并坚持几个小时。

Answer 1

我真的很傻到弄明白我错过了ng-repeat。以下解决了这个问题：

<div ng-controller="ProductController">
   <table class="table" ng-repeat="m in Product">
      <tr>
         <td>{{ m.ProductName }}</td>
         <td>{{ m.Details }}</td>
         <td>{{ m.Price }}</td>
         <td>{{ m.Stock }}</td>
      </tr>
   </table>
</div>