c# - 使用 AngularJs 从数据库中检索和过滤数据

Question

我正在努力学习和使用 AngularJs。最后做了一个样本，但无法从数据库中检索数据。我正在尝试过滤产品数据并尝试了以下操作:

ASP.NET MVC Controller :

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>