AngularJs - SELECT의 ng-model

AngularJs - SELECT의 ng-model

JSFiddle

문제:

내 페이지에는 SELECT 요소가 있으며, 여기에는ng-repeat또,ng-model디폴트값이 설정되어 있습니다.

값을 변경하면ng-model적응해요, 괜찮아요그러나 드롭다운 목록에는 시작 시 빈 슬롯이 표시되며, 대신 기본값이 선택된 항목이 있어야 합니다.

코드

<div ng-app ng-controller="myCtrl">
    <select class="form-control" ng-change="unitChanged()" ng-model="data.unit">
         <option ng-repeat="item in units" ng-value="item.id">{{item.label}}</option>
    </select>
</div>

JS의 경우:

function myCtrl ($scope) {
    $scope.units = [
        {'id': 10, 'label': 'test1'},
        {'id': 27, 'label': 'test2'},
        {'id': 39, 'label': 'test3'},
    ]

        $scope.data = {
        'id': 1,
        'unit': 27
        }

};

옵션 요소에는 ng-selected 디렉티브를 사용할 수 있습니다.truthy가 선택한 속성을 설정하는 경우 표현해야 합니다.

이 경우:

<option ng-selected="data.unit == item.id" 
        ng-repeat="item in units" 
        ng-value="item.id">{{item.label}}</option>

데모

angular.module("app",[]).controller("myCtrl",function($scope) {
    $scope.units = [
        {'id': 10, 'label': 'test1'},
        {'id': 27, 'label': 'test2'},
        {'id': 39, 'label': 'test3'},
    ]

        $scope.data = {
        'id': 1,
        'unit': 27
        }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
    <select class="form-control" ng-change="unitChanged()" ng-model="data.unit">
         <option ng-selected="data.unit == item.id" ng-repeat="item in units" ng-value="item.id">{{item.label}}</option>
    </select>
</div>

다음 코드를 시험합니다.

컨트롤러:

 function myCtrl ($scope) {
      $scope.units = [
         {'id': 10, 'label': 'test1'},
         {'id': 27, 'label': 'test2'},
         {'id': 39, 'label': 'test3'},
      ];

   $scope.data= $scope.units[0]; // Set by default the value "test1"
 };

페이지 내:

 <select ng-model="data" ng-options="opt as opt.label for opt in units ">
                </select>

현용 바이올린

옵션 태그를 정의할 필요는 없습니다.ngOptions 디렉티브를 사용하여 정의할 수 있습니다.https://docs.angularjs.org/api/ng/directive/ngOptions

<select class="form-control" ng-change="unitChanged()" ng-model="data.unit" ng-options="unit.id as unit.label for unit in units"></select>

단, ngOptions는 반복 인스턴스별로 새로운 스코프를 작성하지 않음으로써 메모리 절감 및 속도 향상 등의 이점을 제공합니다.각도 문서

대체 솔루션 사용ng-init지시.기본 데이터를 초기화할 함수를 지정할 수 있습니다.

$scope.init = function(){
            angular.forEach($scope.units, function(item){
                if(item.id === $scope.data.unit){
                    $scope.data.unit = item;
                }
            });
        } 

'jsfiddle' 참조

다음과 같이 ng-repeat에서 기본값이 선택된 항목을 넣을 수도 있습니다.

<div ng-app="app" ng-controller="myCtrl">
    <select class="form-control" ng-change="unitChanged()" ng-model="data.unit">
        <option value="yourDefaultValue">Default one</option>
        <option ng-selected="data.unit == item.id" ng-repeat="item in units" ng-value="item.id">{{item.label}}</option>
    </select>
</div>

빈칸으로 두면 같은 문제가 발생한다는 것을 잊지 말아 주세요.

Select 기본값은 목록의 값 중 하나여야 합니다.선택을 기본값으로 로드하려면 ng-options를 사용합니다.스코프 변수를 컨트롤러로 설정해야 하며, 이 변수는 HTML의 select 태그에서 ng-model로 할당됩니다.

이 플런커를 참조하여 참조해 주세요.

http://embed.plnkr.co/hQiYqaQXrtpxQ96gcZhq/preview

언급URL : https://stackoverflow.com/questions/30048605/angularjs-ng-model-in-a-select