我是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