Question

我是Angular的初学者，使用Angular 1.0进行Crud操作，能够将数据添加到数据库（sql server 2008），想要在Partial Page ListPlayer.html上显示数据但是我没有得到数据 - 陷入困境，Angular有很多变化，请帮助我

这是我的app.js文件代码

var app = angular.module("ApplicationAngularDemo", ["ApplicationAngularDemo.controllers", "ngRoute"])

app.config(["$routeProvider", function ($routeProvider) {

    $routeProvider.when("/", { templateUrl: "/Partials/PlayerList.html", controller: "MainController" }).

        when("/AddPlayer", {templateUrl:"/Partials/AddPlayer.html",
        controller: "AddPlayerController"
        }).
        when("/EditPlayer/:id", {
            templateUrl: "/Partials/EditPlayer.html",
        controller:"EditPlayerController"}).
    otherwise({ redirectTo: "/" });

}])

这是我的controller.js文件

angular.module("ApplicationAngularDemo.controllers",[]).
controller("MainController", function ($scope ,PlayerService) {
    $scope.message = "Main Controller";
    PlayerService.GetPlayersFromDB().then(function (response)
    {
        $scope.listPlayers = response.data.list; 
    })

}).
    controller("AddPlayerController", function ($scope, PlayerService) {
        $scope.message = "Add Player Details";

        $scope.AddPlayer = function ()
        {
            PlayerService.AddPlayer($scope.player);
        }



    }).controller("EditPlayerController", function ($scope)
    {
        $scope.message="Edit Player Details"

    }).

factory("PlayerService", ["$http", function ($http) {

    var fac = {};
    fac.GetPlayersFromDB = function ()
    {

        $http.get("/Player/GetAllPlayers");
    }

    fac.GetPlayerById = function (id) {

        $http.get("/Player/GetlPlayerById", { params: {id:id}});
    }

    fac.AddPlayer = function (player) {

        $http.post("/Player/AddPlayer", player).then(function (response) {
            if (response.data)
                alert('Data Submitted Successfully');
        })
    }

    fac.UpdatePlayer = function (player) {

        $http.post("/Player/UpdatePlayer", player).then(function (response) {
            if(response.data)
            alert('Data Updated Successfully');
        })
    }



    fac.DeletePlayer = function (id) {

        $http.post("/Player/DeletePlayer", { id: id }).then(function (response) {
            if (response.data)
            alert('Data Deleted Successfully');
        })
    }


    return fac;

}])

这是我的播放器控制器类

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Data.Entity;
using ApplicationAngularDemo.Models;

namespace ApplicationAngularDemo.Controllers
{
    public class PlayerController : Controller
    {
        private CrudContext _context = null;


        public PlayerController()
        {

            _context = new CrudContext();
        }

        public JsonResult GetAllPlayers()
        {
            List<Player> listPlayer = _context.Players.ToList();
            return Json(new { list = listPlayer },JsonRequestBehavior.AllowGet);
        }

        public JsonResult GetlPlayerById(int id)
        {
            Player Player = _context.Players.Where(x => x.PlayerId == id).SingleOrDefault();
            return Json(new { player = Player }, JsonRequestBehavior.AllowGet);
        }


        public JsonResult AddPlayer(Player player)
        {
            _context.Players.Add(player);
            _context.SaveChanges();
            return Json(new { status = "Player Added Successfully" });
        }

        public JsonResult UpdatePlayer(Player player)
        {
            _context.Entry(player).State = System.Data.EntityState.Modified;
            _context.SaveChanges();
            return Json(new { status = "Player Updated Successfully" });
        }

        public JsonResult DeletePlayer(int id)
        {
            Player Player = _context.Players.Where(x => x.PlayerId == id).SingleOrDefault();
            _context.Players.Remove(Player);
            _context.SaveChanges();
            return Json(new { status = "Player Deleted Successfully" });

        }




    }

}

这是My Partilal ListPlayer，我正在使用ng-repeat direactive

<h3>List Of Players</h3>
{{message}}

<table>
    <tr>
        <th>Name</th>
        <th>Club</th>
        <th>Country</th>
        <th>Age</th>
    </tr>
    <tr ng-repeat="player in listPlayers">
        <td>{{player.Name}}</td>
        <td>{{player.Club}}</td>
        <td>{{player.Country}}</td>
        <td>{{player.Age}}</td>



    </tr>


</table>

＆安培;这是我正在渲染此Partilal Views（页面）的deafult Page ApplicationAngularDemo.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Angular Demo App</title>
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/angular-route.min.js"></script>
    <script src="Scripts/app.js"></script>   
    <script src="Scripts/controllers.js"></script>
</head>
<body ng-app="ApplicationAngularDemo">
    <div  ng-view>

    </div>

</body>
</html>

Answer 1

您在这里缺少的是您没有从您的服务返回。您的服务功能应如下所示：

fac.GetPlayersFromDB = function () {
    return $http.get("/Player/GetAllPlayers");
}

对于从API获取数据的其他函数也是如此。

那应该解决它！

无法使用ng-repeat在html页面上显示数据

1 个答案: