Question

当我需要动态生成下拉列表时，我是角度新手并遇到问题。我有两个对象：

所有课程：

[{"CourseId":"1","CourseName":"Math"},{"CourseId":"2","CourseName":"Danish"},{"CourseId":"3","CourseName":"English"}]

选定的学生：

{ "UserId": "1" , "StudentName" : "Alan" , "Courses" :[{ "CourseId"="2", "CourseName"="Danish"},{ "CourseId"="3", "CourseName"="English"}]}

我所做的是，我会生成有关个别学生课程数量的下拉列表。然后，所有下拉列表都会填充所有可用的课程。我的问题是我不能使用默认值设置不同下拉列表中的空白空间？默认值应为所选学生对象包含的课程。

看看我现在拥有的东西：

我的Html：

<div class="form-group" ng-repeat= "StudentCourses in studentSelected.Courses">
 <select ng-model="studentCourseId" class="form-control" ng-options="obj.CourseId as obj.CourseName for obj in allCourses">
 </select>
</div>

我的控制器：

MasterController.controller('editController',function($scope, $http, selectedStudentService, adminFactory, $location){

      // Get selected Student from my service
  $scope.studentSelected = selectedStudentService.getSelectedStudent();
  // Get all courses from my factory
  $scope.allCourses = adminFactory.getAllCourses($scope, $http);



  var arrayCourses = $scope.studentSelected.Courses;
   for(var i=0; i<arrayCourses.length; i++){
       // Here's the problem, I get only the last value?
     $scope.studentCourseId = arrayCourses[i].CourseId;
   }
});

Answer 1

将选择模型分配给列表第一个值。

$scope.studentCourseId = $scope.allCourses[0].CourseId;

或包含选项值＆＃39;选择＆＃39;在选择选项的顶部。

<select ng-model="selectedId" class="form-control" ng-options="obj.CourseId as obj.CourseName for obj in allCourses">
  <option value="">select</option>
</select>

演示：http://plnkr.co/edit/9yuuG1oiTAmTXS7lZY0u?p=preview

Answer 2

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $http,$log) {
    $http.get('data.json').success(function(data){
        $scope.allCourses = data;

        for(var i=0; i<$scope.allCourses.length;i++){
            $scope.myNames=$scope.allCourses[i].StudentName;
            $scope.selectedId=$scope.allCourses[i];
            $scope.studentCourseId=$scope.allCourses[i].Courses[i]
            $scope.myCourses = $scope.allCourses[1].Courses;
        }
    });

});

[
  {
    "UserId": "1",
    "StudentName": "John",
    "Courses": [
      {
        "CourseId": "1",
        "CourseName": "Math"
      },
      {
        "CourseId": "2",
        "CourseName": "Danish"
      },
      {
        "CourseId": "3",
        "CourseName": "English"
      }
    ]
  },
  {
    "UserId": "2",
    "StudentName": "Alan",
    "Courses": [
      {
        "CourseId": "1",
        "CourseName": "History"
      },
      {
        "CourseId": "2",
        "CourseName": "Danish"
      },
      {
        "CourseId": "3",
        "CourseName": "English"
      }
    ]
  }
]

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>
        document.write('<base href="' + document.location + '" />');
    </script>

    <script data-require="angular.js@1.1.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js" data-semver="1.1.5"></script>
    <script src="scripts/app.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<select ng-model="selectedId" class="form-control" ng-options="obj.StudentName for obj in allCourses">

</select>-
<select ng-model="studentCourseId" class="form-control" ng-options="obj.CourseName for    obj in myCourses">

</select>

</div>
</body>
</html>

http://plnkr.co/edit/4Vw8Wfayy5ZGpZNQqzOc?p=preview

以角度生成动态下拉列表

2 个答案: