我是MVC和AngularJs中的新成員。我的問題是 - 我正在使用ng-repeat來顯示數據。調試顯示數據已在javascript和MVC控制器中正確檢索。即使ng-Repeat工作正常，但所有行都是在沒有任何數據的情況下生成的。我的意思是生成12個空白行。以下是Json數據。MVC應用程序不顯示數據
[{「categoryID」：1，「categoryName」：「Beverages」，「description」：「軟飲料，咖啡，茶，啤酒和麥芽酒」}，{「categoryID」 ：「調味品」，「描述」：「甜味和鹹味醬汁，滋味，調味品和調味料」}，{「categoryID」：3，「categoryName」：「Confections」，「description」：「甜點，糖果和甜點麪包「}，{」categoryID「：4，」categoryName「：」乳製品「，」description「：」奶酪「}，{」categoryID「：5，」categoryName「：」穀物/穀類「，」描述「： 「麪包，餅乾，麪食和麥片」}，{「categoryID」：6，「categoryName」：「肉類/家禽」，「description」：「準備的肉類」}，{「categoryID」：7，「categoryName」 「產品」，「描述」：「乾果和豆腐」}，{「categoryID」：8，「categoryName」：「Seafood」，「description」：「海藻和魚」}，{「categoryID」 「類別名稱」： 「WWW」， 「描述」： 「ghhhh」}，{ 「的categoryID」：10， 「類別名稱」： 「BBB」， 「說明」：「NNN 「}，{」 的categoryID 「：11，」 類別名稱 「：」 ASD」， 「描述」： 「sdsad」}，{ 「的categoryID」：12， 「類別名稱」： 「ssfsf」， 「描述」： 「AF1」} ]
這裏是我的控制器（CategoryController.cs）
public ActionResult GetCategory()
{
var categoryList = from cat in _db.Categories
select new
{
cat.CategoryID,
cat.CategoryName,
cat.Description
};
return Json(categoryList, JsonRequestBehavior.AllowGet);
}
我app.js文件
var myApp = angular.module('myApp', ['ngRoute', 'ngResource', 'ui.bootstrap']);
我Router.js文件
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: "App/Home/home.html"
}),
$routeProvider.when('/about', {
templateUrl: "App/Home/about.html"
}),
$routeProvider.when('/category', {
templateUrl: "App/Category/Html/categoryList.html",
controller: "categoryController"
});
}]);
個我categoryController.js文件
myApp.controller('categoryController',
['$scope', 'categoryDataService', '$location',
function categoryController($scope, categoryDataService) {
$scope.categories = [];
loadCategoryData();
function loadCategoryData() {
categoryDataService.getCategories()
.then(function() {
$scope.categories = categoryDataService.categories;
},
function() {
alert("Error");
})
.then(function() {
$scope.isBusy = false;
});
};
}]);
我categoryDataService.js文件
myApp.factory('categoryDataService', ['$http', '$q',
function ($http, $q) {
var _categories = [];
var _getCategories = function() {
var deferred = $q.defer();
var controllerQuery = "Category/GetCategory";
$http.get(controllerQuery)
.then(function(result) {
// Successful
angular.copy(result.data, _categories);
deferred.resolve();
},
function(error) {
// Error
deferred.reject();
});
return deferred.promise;
};
//Expose methods and fields through revealing pattern
return {
categories: _categories,
getCategories: _getCategories
}
}]);
我CategoryList.html文件。
<div class="table table-responsive">
<table class="table table-striped">
<thead>
<tr>
<td>Id</td>
<td>Category Name</td>
<td>Description</td>
<td></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="category in categories | filter:search_txt ">
<td>{{category.CategoryID}}</td>
<td>{{category.CategoryName}}</td>
<td>{{category.Description}}</td>
<td>
<a class="btn btn-primary" href="#/category/{{CategoryId.id}}">
<i class="glyphicon glyphicon-edit"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
包含CategoryList.html文件的Index.cshtml文件。 我Index.cshtml
<div class="ng-view"> </div>
而且_Layout.cshtml看起來像下面
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>@ViewBag.Title - North Wind</title>
@Styles.Render("~/Content/css")
@*@Scripts.Render("~/bundels/modernizr")*@
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Northwind", "Index", "Home", null, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#/">Home</a></li>
<li><a href="#/category">Category</a></li>
<li><a href="#/customer">Customer</a></li>
<li><a href="#/about">About</a></li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
</div>
<hr />
<footer>
<div class="container">
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</div>
</footer>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/angularApp")
@RenderSection("scripts", required: false)
</body>
</html>
我的模型文件：
namespace WebApp1.Models
{
using System;
using System.Collections.Generic;
public partial class Category
{
public int CategoryID { get; set; }
public string CategoryName { get; set; }
public string Description { get; set; }
public byte[] Picture { get; set; }
}
}
我已經給你更好的理解孔代碼。任何幫助將不勝感激。
感謝
帕塔
CategoryName！= categoryName，您應該使用{{category.categoryName}} - 在角度數據綁定中更改表達式的外殼，它應該可以工作。 – Ric