Question

我想做的是在组合框中显示城市。在每个城市选择中，我需要在表格中显示属于所选城市的学生。

该表位于ng-template中，因此当我从下拉框中选择城市时，该模板应该加载学生。

请按照以下代码

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

我可以加载模板，但学生没有显示。在模板中提取的行是空的。我无法看到财产＆＃34; name＆＃34;和＆＃34;分支＆＃34;在表格中，它们只是空行。

我也在jsfeedle中加载了这个例子，请完成它

Dynamic templating using NG-template

Answer 1

相同的代码工作正常in this plunker I created。你在小提琴中得到Uncaught Error: [$injector:modulerr]，这可能与jsfiddle如何加载你的脚本有关。

带有ng-repeat的Ng模板显示空对象

1 个答案: