각도로 동적 드롭 다운 목록 생성

나는 새내기가되어 문제를 직면 할 때 드롭 다운 목록을 동적으로 생성해야합니다.각도로 동적 드롭 다운 목록 생성

모든 코스 :

[{"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; 
    } 
});

출처

2014-06-05 wamp

중 하나가 목록의 첫 번째 값을 선택 NG 모델을 할당을

내가 지금 무엇을 참조하십시오.

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

선택 옵션의 맨 위에 '선택'값을 삽입하십시오.

<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

출처

2014-06-05 10:35:05 guru

당신은 코드를 자세히 보면. 선택한 학생의 과정에 따라 2 개의 드롭 다운 목록이 생성됩니까? 모든 2 개의 목록에는 모든 과정이 포함됩니다. 그러나 첫 번째 목록의 기본값은 "덴마크어"로 설정되고 두 번째 목록은 "영어" – wamp

으로 설정되어야합니다. 그래서 단지 코스 선택을 세이콘 선택 모델에 할당하십시오. plnkr -http : //plnkr.co/edit/9yuuG1oiTAmTXS7lZY0u? p = 미리보기를 업데이트했습니다. – guru

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="[email protected]" 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

출처

2014-06-05 13:41:41

각도로 동적 드롭 다운 목록 생성

답변

관련 문제