Angularjs 带有Ng重复的Ng模板显示空对象
我想做的是在组合框中显示城市。在每个城市选择中，我需要在表中显示属于所选城市的学生 表格在ng模板中，因此当我从下拉框中选择城市时，该模板应加载学生 请按照下面的代码操作Angularjs 带有Ng重复的Ng模板显示空对象,angularjs,Angularjs,我想做的是在组合框中显示城市。在每个城市选择中，我需要在表中显示属于所选城市的学生 表格在ng模板中，因此当我从下拉框中选择城市时，该模板应加载学生 请按照下面的代码操作 <!DOCTYPE HTML> <html ng-app="myApp"> <head> <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></scrip
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></link>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<script type="text/javascript">
(function(){
angular.module("myApp",[]);
angular.module("myApp").controller("myCtrl",myCtrl);
angular.module("myApp").factory("StudentService",StudentService);
myCtrl.$inject = ["$scope","$log","StudentService","$timeout"];
function StudentService(){
var obj = new Object();
var studentMap = new Object();
obj.getStudents = getStudents;
obj.getCities = getCities;
studentMap["New York"] = [];
studentMap["Barbados"] = [];
studentMap["Istambul"] = [];
studentMap["New York"].push({"name" : "Sankalp Kunder", "branch" : "Mechanical Engineering"});
studentMap["New York"].push({"name" : "Sunil Tandel", "branch" : "Instrumentation Engineering"});
studentMap["New York"].push({"name" : "Shamshuddin Ahmed", "branch" : "Production Engineering"});
studentMap["New York"].push({"name" : "Samir Gupta", "branch" : "Computer Engineering"});
studentMap["Barbados"].push({"name" : "Vaibhav Patil", "branch" : "Fashion Designing"});
studentMap["Barbados"].push({"name" : "Suresh Owhal", "branch" : "Marketing Managment"});
studentMap["Barbados"].push({"name" : "Kavita Nandgaonkar", "branch" : "History and Litrature"});
studentMap["Barbados"].push({"name" : "Swapnali Joshi", "branch" : "Commerce"});
studentMap["Barbados"].push({"name" : "Vithhal Gaikwad", "branch" : "Law"});
studentMap["Istambul"].push({"name" : "Salim Khan", "branch" : "Law"});
studentMap["Istambul"].push({"name" : "Aslam Shaikh", "branch" : "Animal Husbandry"});
studentMap["Istambul"].push({"name" : "Liyaqat Ali", "branch" : "Carpentary"});
studentMap["Istambul"].push({"name" : "Suleman Kaskar", "branch" : "Cutting and Polishing"});
return obj;
function getStudents(city){
return studentMap[city];
}
function getCities(){
var ct = [];
angular.forEach(studentMap,function(value,key){
ct.push(key);
});
return ct;
}
}
function myCtrl($scope,$log,StudentService,$timeout){
$log.log("Hi Angular !!!!");
$scope.cityList = StudentService.getCities();
$scope.selectedCity = "";
$scope.selectedStudents = "";
$scope.templateName = "";
$scope.getStudents = function(){
$scope.templateName = "";
$scope.selectedStudents = StudentService.getStudents($scope.selectedCity);
$log.log($scope.selectedStudents);
$scope.templateName = "studentsTemplate";
}
}
})();
</script>
</head>
<body ng-controller="myCtrl">
<div class="container">
<div class="page-header">
<h3>Dynamic HTML Template Content</h3>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="row">
<div class="col-md-12">
<select ng-model="selectedCity" ng-options="city for city in cityList"
ng-change="getStudents()">
<option value="">Select</option>
</select>
</div>
<div class="col-md-12">
<ng-include src="templateName" />
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/ng-template" id="studentsTemplate">
<table class="table">
<tr>
<th>Name</th>
<th>Branch</th>
</tr>
<tr ng-repeat="student in selectedStudents">
<td>{{student.name}}</td>
<td>{{student.branch}}</td>
</tr>
</table>
</script>
</body>
（功能（）{
angular.module（“myApp”，[]）；
角度.module（“myApp”）.controller（“myCtrl”，myCtrl）；
angular.module（“myApp”）.factory（“StudentService”，StudentService）；
myCtrl.$inject=[“$scope”、“$log”、“StudentService”、“$timeout”]；
函数StudentService（）{
var obj=新对象（）；
var studentMap=新对象（）；
obj.getStudents=getStudents；
obj.getCities=getCities；
学生地图[“纽约”]=[]；
学生地图[“巴巴多斯”]=[]；
学生地图[“Istambul”]=[]；
学生地图[“纽约”].push（{“姓名”：“Sankalp Kunder”，“分支机构”：“机械工程”}）；
学生地图[“纽约”].push（{“名称”：“Sunil Tandel”，“分支”：“仪器工程”}）；
学生地图[“纽约”].push（{“姓名”：“Shamshuddin Ahmed”，“分支机构”：“生产工程”}）；
学生地图[“纽约”].push（{“姓名”：“Samir Gupta”，“分支机构”：“计算机工程”}）；
学生地图[“巴巴多斯”]。推送（{“名称”：“Vaibhav Patil”，“分支”：“时装设计”}）；
学生地图[“巴巴多斯”]。推送（{“姓名”：“Suresh Owhal”，“分支机构”：“营销管理”}）；
学生地图[“巴巴多斯”].push（{“姓名”：“Kavita Nandgaonkar”，“分支机构”：“历史与文学”}）；
学生地图[“巴巴多斯”]。推送（{“姓名”：“Swapnali Joshi”，“分行”：“商业”}）；
学生地图[“巴巴多斯”].push（{“姓名”：“Vithhal Gaikwad”，“分支机构”：“法律”}）；
学生地图[“Istambul”]。推送（{“姓名”：“萨利姆·汗”，“分支”：“法律”}）；
学生地图[“Istanbul”].push（{“姓名”：“Aslam Shaikh”，“分支机构”：“畜牧业”}）；
学生地图[“Istambul”]。推送（{“姓名”：“Liyaqat Ali”，“分支”：“Carpentary”}）；
学生地图[“Istambul”]。推送（{“名称”：“Suleman Kaskar”，“分支”：“切割和抛光”}）；
返回obj；
学生功能（城市）{
返回学生地图[城市]；
}
函数getCities（）{
var-ct=[]；
angular.forEach（学生地图、函数（值、键）{
推（键）；
});
返回ct；
}
}
函数myCtrl（$scope、$log、StudentService、$timeout）{
$log.log（“嗨！！！！”）；
$scope.cityList=StudentService.getCities（）；
$scope.selectedCity=“”；
$scope.selectedStudents=“”；
$scope.templateName=“”；
$scope.getStudents=function（）{
$scope.templateName=“”；
$scope.selectedStudents=StudentService.getStudents（$scope.selectedCity）；
$log.log（$scope.selectedStudents）；
$scope.templateName=“studentsTemplate”；
}
}
})();
动态HTML模板内容
挑选
名称
分支机构
{{student.name}
{{student.branch}}
相同的代码工作正常。您的小提琴中出现了一个
未捕获错误：[$injector:modulerr]selectedCitygetStudents$scope.templateName=“”控制器中的行，所以我将它们取出。普朗克更新了。若那个并没有帮助，我有点不知所措。我在服务器上运行这个示例，它不是一个独立的页面。它和html页面是Django应用程序的一部分。那么我的td是空的吗？在这种情况下，您的服务需要调用您的服务器并在承诺中返回学生，但是一旦客户端拥有学生列表，您应该能够毫无问题地执行代码。您是再次呼叫您的服务器以获取selectedStudents
，还是只是筛选客户端上已有的数据？