AngularJS - 선택 태그에 ng-repeat을 사용하여 추가 공백 옵션 추가

AngularJS - 선택 태그에 ng-repeat을 사용하여 추가 공백 옵션 추가

Angular를 사용하여 선택한 목록 상자가 있습니다.JS ng-repeat.리스트 박스가 올바르게 작성되어 아이템 중 하나를 선택하고 버튼을 클릭하면 기능에 액세스하여 필요한 정보를 얻을 수 있습니다.

저의 html 코드는 다음과 같습니다.

<select size="6" ng-model="item" ng-options="s.name for s in itemlist"></select>
<button class="btn tt-btn-blue" ng-model="singleModel" ng-click="onLoadClicked(item.id)">Load</button>

문제는 리스트 박스가 페인트를 칠할 때 맨 위에 빈 항목이 하나 있다는 것입니다.Chrome 실행 중에 목록 상자를 검사하면 콘솔에 다음과 같은 출력이 표시됩니다.

<select size="6" ng-model="item" ng-options="s.name for s in itemlist" class="ng-pristine ng-valid">
<option value="?" selected="selected"></option>
<option value="0">Item 1</option>
<option value="1">Item 2</option>
<option value="2">Item 3</option>
<option value="3">Item 4</option>
<option value="4">Item 5</option>
<option value="5">Item 6</option>
</select>

어떻게 하면 ng-repeat에 의해 삽입된 첫 번째 옵션을 없앨 수 있을지 궁금합니다.목록 상자 맨 위에 공백이 있으면 안 됩니다.첫 번째 실제 옵션(value="0")을 선택 아이템으로 설정하는 방법도 있습니다만, 선택 아이템이 없는 것이 좋습니다.

언제든지 볼 수 있습니다.<option value="?" selected="selected"></option>그 선택에서, 그것은 당신의 것이ng-model에 없는 값으로 설정되어 있다.ng-options따라서 공백 옵션을 원하지 않을 경우 반드시 확인해야 합니다.item의 값으로 설정되어 있습니다.itemlist이 조작은 컨트롤러에 다음 기능을 탑재하는 것만으로 간단합니다.

$scope.item = $scope.itemlist[0];

그러면 초기값이 지정되고 이후 angular가 업데이트됩니다.

각도별 자동 추가 옵션을 숨기는 가장 간단한 방법은 ng-if 지시입니다.

<select ng-options="option.id as option.description for option in Options">
    <option value="" ng-if="false"></option>
</select>

오랜 RND 끝에 해결 방법을 찾았습니다.다음 코드를 찾아주세요.

여기 HTML 코드가 있습니다.

<div class="col-xs-3" ng-controller="GetUserADDetails">
            <label>Region</label>
                <select id="DDLRegion" ng-model="selectedregion" class="form-control" ng-change="getBranched(selectedregion)">   
                                <option value="" >--Select Region--</option>                                 
                                <option ng-repeat="region in Regions" value="{{region.LookupID}}">{{region.LookupValue}}</option>
                  </select>
 </div>

모듈 코드는 다음과 같습니다.

var app = angular.module("UserMasterModel", [])
        .controller("GetUserADDetails", function ($scope, $http,$log) {
         $http({
                method: 'GET',
                url: '/UserMaster/GetAllRegion'
            })
            .then(function (response) {
                $scope.Regions = response.data;                        
                //$log.info(response);
            });

});

언급URL : https://stackoverflow.com/questions/15488181/angularjs-extra-blank-option-added-using-ng-repeat-in-select-tag