無法顯示在HTML頁面上的數據通過使用ng-repeat

Question

我是初學者的Angular，使用Angular 1.0做Crud操作，能夠將數據添加到數據庫（sql server 2008），想要顯示數據在部分頁面ListPlayer.html但我沒有得到的數據-Got停留在點，在這麼多的變化角在那裏，請幫助我在此

這是我的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" }); 

     } 




    } 

}

這是我的Partilal ListPlayer這裏我使用NG-重複雙反應

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

&這是deafult頁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獲取數據的其他函數也是如此。

這應該解決它！