Не удается прочитать свойство 'длина' неопределенного в Angularjs 1.6.6 - PullRequest
Новая
       7

Не удается прочитать свойство 'длина' неопределенного в Angularjs 1.6.6

0 голосов
/ 10 мая 2018

Я должен выпадающих списков и хочу заполнить второй список на основе выбранного значения в первом списке. Я столкнулся с проблемой при заполнении первого списка. Я использую getCurrentSessionCourses () метод Course Service, чтобы получить данные с сервера и заполнить первый список этими данными. Первый список заполняется в цикле for. Если цикл for выполняется до ответа сервера, то i <$ scope.Courses.length </em> имеет неопределенное значение. Иногда данные поступали до выполнения цикла for, а иногда данные приходили после выполнения цикла for . Ниже мой AddStudentController.js и связанный HTML 

   

 (function(){

     var myApp = angular.module("myApp");

        var AddStudentController = function ($scope,StudentService,CourseService) {
        
         var onCourses = function (data) {
                var result = [];        
                for (var i = 0; i < $scope.Courses.length; i++) {
                    for (var j = 0; j < data.length; j++) {
                      if (data[j].IdCourse ===  $scope.Courses[i].idCourse) {
                            if (result.indexOf(data[j]) === -1) {
                                result.push(data[j]);
                            }
                        }
                    }
                }
                 $scope.courses = result;
                $scope.selectedCourse = result[0];

                var IdCourse = $scope.selectedCourse.IdCourse;
                var IdSessionCourse = null;
                for (var i = 0; i < $scope.Courses.length; i++) {
                    if ($scope.Courses[i].idCourse === IdCourse) {
                        IdSessionCourse = $scope.Courses[i].idSessionCourse;
                    }
                };
                CourseService.getCourseClasses(IdSessionCourse).then(function (classes) { 
                $scope.classes = classes;
                $scope.selectedClass = classes[0];
                });
        
        CourseService.getCurrentSessionCourses().then(function (courses) { $scope.Courses = courses });
        CourseService.courses().then(onCourses); 
        };
        
        myApp.controller("AddStudentController", AddStudentController)
        
    }());

////Below is CourseService.js

    (function () {
    
        var CourseService = function ($http) {
    
            var urlBase = 'api/CoursesAPI';
    
            var getCurrentSessionCourses = function () {
                return $http.get("api/CoursesAPI/GetCurrentSessionCourses")
                    .then(function (response) {
                        return response.data;
                    });
    
    return {
     getCurrentSessionCourses: getCurrentSessionCourses,
    };
            };
     var module = angular.module("myApp");
        module.factory("CourseService", CourseService);
    }());
 

<div class="col-lg-5">
    <div class="form-group">
         <label>Select Course</label>
          <select ng-model="selectedCourse" ng-change="change()" class="formcontrol" 
        ng-options="course.IdCourse as course.Name for course in courses"> 
       </select>
    </div>
 </div>
  <div class="col-lg-5">
      <div class="form-group">
         <label>Select Class</label>
         <select ng-model="selectedClass" class="form-control" ng-options="class.idClass as class.className +' : '+class.campusName  for class in classes"></select>
   </div>
  </div>

Ответы [ 2 ]

0 голосов
/ 10 мая 2018

Попытайтесь инициализировать $scope.Courses = [].

Когда angular рендерит страницу, он не найдет никакого объекта $scope.Courses, пока вы не назначите свой ответ на $scope.Courses, таким образом, выбрасывая

$ scope.Courses.length имеет неопределенное значение 

var myApp = angular.module("myApp");
    $scope.Courses = []; // Add this line
    var AddStudentController = function ($scope,StudentService,CourseService) {

     var onCourses = function (data) {

...

0 голосов
/ 10 мая 2018

Попытайтесь вызвать CourseService.courses() после CourseService.getCurrentSessionCourses() следующим образом: 

CourseService.getCurrentSessionCourses().then(function (courses) { 
    $scope.Courses = courses;
    CourseService.courses().then(onCourses);
});

Таким образом, вы будете уверены, что $scope.Courses имеет какое-то значение, когда вы попытаетесь повторить его.

...