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
'programing' 카테고리의 다른 글
종속성을 업데이트하는 동안 작곡자가 중단됨 (0) | 2023.03.23 |
---|---|
JSON 응답에 대한 jQuery AJAX 폴링, AJAX 결과 또는 JSON 콘텐츠에 따른 처리 (0) | 2023.03.23 |
각도 연장기 재스민 테스트에서의 console.log 출력 표시 (0) | 2023.03.23 |
스프링 부트 시 Tomcat을 사용한HTTP2의 이니블화 (0) | 2023.03.23 |
wcf에서 raw json(문자열)을 반환하는 중 (0) | 2023.03.23 |