드롭다운 목록의 첫 번째 요소 비우기
저는 Angular은 꽤 초보입니다.JS와 나는 현재 장고에서 Angular를 사용하는 웹 어플리케이션 작업을 하고 있다.프런트 엔드의 JS는 말할 수 있습니다.문제는 스코프의 객체로 채워진 드롭다운목록이 항상 빈 요소로 시작된다는 것입니다(목록에서 하나를 선택하면 문제가 사라집니다).사용자가 아무것도 선택하지 않으면 POST 요청이 정상적으로 작동하지 않기 때문에 문제가 발생합니다.미리 선택한 값이나 비슷한 것을 얻을 수 있는 방법을 알고 싶습니다.코드는 다음과 같습니다.
태그 선택:
<select id="sel" class="input-block-level" ng-model="list_category">
<option ng-repeat="obj in list_categories.data" value="{{obj.id}}">{{obj.name}}</option>
<option value="Other">Other</option>
</select>
$syslog.list_카테고리:
var listcategoryPromise = ListCategory.get();
listcategoryPromise.then(function(response) {
$scope.list_categories = {
meta : response.data.meta,
data : response.data.objects
};
});
지시문을 사용하다ng-options를 삭제합니다.valueOther' 옵션에서 다음과 같이 입력합니다.
<select id="sel" class="input-block-level" ng-model="list_category" ng-options="obj.id as obj.name for obj in list_categories.data">
<option value="">Other</option>
</select>
이것에 의해, 다음과 같이 할 수 있습니다.list_category이 비어 있습니다(선택된 항목이 없습니다). '기타' 옵션이 선택되어 있습니다(기본값).
jsFiddle : http://jsfiddle.net/bmleite/gkJve/
다음 작업 예를 참조하십시오.옵션에 의한 ng-repeat은 피해야 합니다.따라서 아래의 샘플코드를 참조해 주세요.
<body ng-controller="testcontroller">
<select ng-model="item" ng-options="item.ID as item.Title for item in items">
</select>
<span>{{item}}</span>
</body>
App.controller('testcontroller', function ($scope) {
$scope.item = '000001';
$scope.items = [
{ ID: '000001', Title: 'Chicago' },
{ ID: '000002', Title: 'New York' },
{ ID: '000003', Title: 'Washington' }
];
});
에 대한 특정 구문을 지정할 수 있습니다.<select>태그에 Angularjs를 붙입니다.
매뉴얼 페이지에서 영감을 얻음:
<select id="sel" class="input-block-level" ng-model="list_category" ng-options="obj.name for obj in list_categories.data">
<option value="Other">Other</option>
</select>
다음은 AngularJs.org 웹사이트에서 직접 제공하는 일부 코드입니다.
<select ng-model="color" ng-options="c.name for c in colors"></select>
우선 보시다시피 옵션목록을 작성하기 위해 ng-repeat을 사용할 필요가 없습니다.앵글은 기본적으로 당신이 할 수 있도록 합니다.foreach옵션 목록을 작성하기 위해 컬렉션에서 루프합니다.둘째, 선택 항목에 ng-model이 있지만 컬렉션 이름과 동일하지 않습니다.이것은 포스트 타임에 실제로 수집되는 당신의 아이템이 될 것입니다.
function MyCntrl($scope) {
$scope.colors = [
{name:'black', shade:'dark'},
{name:'white', shade:'light'},
{name:'red', shade:'dark'},
{name:'blue', shade:'dark'},
{name:'yellow', shade:'light'}
];
$scope.color = $scope.colors[2]; // red
}
자, 여기 자바스크립트 컨트롤러 코드가 있습니다. $scope.colors컬렉션과$scope.color는 html의 선택 목록에 할당된 모델 속성입니다.이 예에서 알 수 있듯이 모델 속성에는 배열의 세 번째 옵션의 기본 시작 값이 지정됩니다.이 설정은 페이지를 처음 로드하기 위해 사용하는http.get 에서 설정할 수 있습니다.
포어치 실행 시 기본적으로 컬렉션에서 '이름' 값을 가져오고 드롭다운에서 '이 값을 표시'라고 말한 후 게시물에 이 값을 사용합니다.초기 모델 속성을 설정하면 드롭다운 목록에 옵션 필드가 비어 있지 않도록 할 수 있습니다.
$scope.form = {type : $scope.typeOptions[0].value};
http://jsfiddle.net/MTfRD/2010/
했을 경우, 드롭 다운의 맨 위에 공백의 옵션이 됩니다.ng-model다음에 작성되는 리스트옵션에 포함되지 않은 값이 있습니다.ng-Repeat 투고를 하고, 「」를 ng-model 에 을 설정합니다.ng-model 잘 첫 번째 을 '어느 정도'로 할 수
$scope.list_category = $scope.list_categories.data[0].id;
언급URL : https://stackoverflow.com/questions/14706986/empty-first-element-in-dropdown-list
'programing' 카테고리의 다른 글
| 날짜(현재 시간 하루 전)를 Bash로 가져옵니다. (0) | 2023.06.04 |
|---|---|
| 반응의 Jquery가 정의되지 않았습니다. (0) | 2023.04.05 |
| JavaScript에서 응답 본문을 다시 읽습니다. (0) | 2023.04.05 |
| 디스패치가 완료될 때까지 리덕스 액션을 기다립니다. (0) | 2023.04.05 |
| 리액트를 사용하여 html 엔티티를 표시하는 방법 (0) | 2023.04.05 |