AngularJS의 선택 상자 옵션에서 기본값 선택

Question

이 문제에 대한 여러 게시물을 읽었으므로이 사이트에서 제공된 솔루션이 저에게 효과적이지 않습니다. 여러 옵션이있는 선택 상자가 있으며 사용자에게 표시 할 기본값이 필요합니다. 현재 옵션이 선택되어 있지 않습니다. 이 코드가 잘못되었을 수 있습니다.

HTML

<select class="form-control input-sm" name="collegeTranscripts1" id="collegeTranscripts1" data-ng- model='transcriptCAdata.typeAccepted' data-ng-options='option.value as option.name for option in typeOptions1'></select> 

JS

$scope.typeOptions1 = [ 
      { name: 'Please Select', value: 'selected' }, 
      { name: 'Official', value: 'OFFICIAL' }, 
      { name: 'Unofficial', value: 'UNOFFICIAL' }, 
      { name: 'None', value: 'NONE' } 
     ]; 

     $scope.form = {type : $scope.typeOptions1[0].value}; 

Answer 1

난 당신의 코드에서 볼 몇 가지 문제가 있습니다

가

1. 속성 data-ng-model 분리되는 HTML, 그것은 다음과 같습니다가 : data-ng- model='transcriptCAdata.typeAccepted'.
2. 또 다른 점은 모델에서 범위 속성 transcriptCAdata.typeAccepted을 사용하고 있지만 컨트롤러에서 선언하지 않았기 때문입니다. 내가 컨트롤러에서 보는 것은 $scope.form = {type : $scope.typeOptions1[0].value};입니다.

data-ng-model을 data-ng-model="form.type"으로 변경하기 만하면됩니다.

DEMO

angular.module('app', []) 
 

 
    .controller('Ctrl', function($scope) { 
 
    $scope.typeOptions1 = [ 
 
      { name: 'Please Select', value: 'selected' }, 
 
      { name: 'Official', value: 'OFFICIAL' }, 
 
      { name: 'Unofficial', value: 'UNOFFICIAL' }, 
 
      { name: 'None', value: 'NONE' } 
 
     ]; 
 

 
    $scope.form = {type : $scope.typeOptions1[1].value}; 
 
    });

<div ng-app="app" ng-controller="Ctrl"> 
 
    <select class="form-control input-sm" name="collegeTranscripts1" 
 
      id="collegeTranscripts1" data-ng-model='form.type' 
 
      data-ng-options='option.value as option.name for option in typeOptions1'> 
 
    </select> 
 
    
 
    {{form.type}} 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

업데이트 : 나는 당신이 제공 한 PLUNKER를 복사하고 그 문제를 가지고 있기 때문에, 그것을 수정 한

.