AngularJS에 의해 생성된 선택 목록에 대한 사전 선택 방법은 무엇입니까?
<select ng-model="team.captain" ng-options="player.name for player in team.players"></select>
그러면 팀 주장을 선택할 수 있는 선택 목록이 올바르게 작성됩니다.그러나 기본적으로는 공백 옵션이 선택되어 있습니다.대신 어떻게 하면 리스트에서 첫 번째 선수를 미리 뽑을 수 있을까요?
<select ng-model="team.captain" ng-options="player.name for player in team.players" class="ng-pristine ng-valid">
<option value="0">John</option>
<option value="1">Bobby</option>
</select>
추가해 보았다ng-init="team.captain='0'"그건 도움이 안 됐어요
업데이트 이 문제가 발생하는 이유는 다음과 같습니다.
ng-model이 참조하는 값이 ng-model로 전달된 옵션 세트에 존재하지 않습니다.
출처: Angular를 사용하는 이유JS가 선택 항목에 빈 옵션을 포함합니까?
그런데 왜 ng-init을 사용하면 안 되는지 의문이 남습니다.
<select ng-init="team.captain='0'" ng-model="team.captain" ng-options="player.name for player in team.players"></select>
효과는 다음과 같습니다.
<select ng-init="team.captain=team.players[0]"
ng-model="team.captain"
ng-options="player.name for player in team.players"></select>
그리고 무엇이 효과가 없었는지:
ng-init="team.captain='0'"
ng-init="team.captain='John'"
내 생각엔 Angular는 단순한 값이나 레이블의 비교를 넘어서는 것 같아.오브젝트 참조를 비교합니다.
다음은 Angular를 사용하여 드롭다운 메뉴를 초기화하는 대체 방법입니다.JS.
(JS Fielle의 작업 예:http://jsfiddle.net/galeroy/100ho18L/1/)
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body ng-app="" ng-controller="myController">
<select
ng-model="carSelection"
ng-options = "x.make for x in cars">
</select>
<script>
function myController($scope) {
$scope.cars = [
{"make": "Nissan", "model": "Sentra"},
{"make": "Honda", "model": "Prelude"},
{"make": "Toyota", "model": "Prius"}
]
$scope.carSelection = $scope.cars[1]; // this line initializes the drop down menu
}
</script>
</body>
@camus가 코멘트에서 이미 언급했듯이 모델을 인덱스 값이 아닌 유효한 "라벨" 값(또는 참조)으로 설정해야 합니다.HTML 에서 인덱스 값이 사용되고 있는 것을 알 수 있기 때문에, 이것은 조금 이상합니다.
Angular는 HTML의 값 속성을 다음과 같이 설정합니다.
- 어레이를 데이터 소스로 사용할 경우 각 반복에서 어레이 요소의 인덱스가 됩니다.
- 오브젝트를 데이터 소스로 사용할 경우 각 반복에서 속성 이름이 됩니다.
항목을 선택하면 Angular는 인덱스 또는 속성 이름을 기준으로 배열/개체의 올바른 항목을 검색합니다.
다음 jsfiddle에서 볼 수 있듯이 ng-selected는 어떻습니까?
<select ng-model="val">
<option ng-repeat="opt in options" ng-selected="$first">
{{ opt }}
</option>
</select>
저는 이것을 ng-model과 ng-options를 사용하여 달성했습니다.기본적으로 모델과 ng-options가 동기화되어 있어야 합니다.
모델(이 경우 projIndustry)이 어떤 번호로 초기화되었을 때 ind를 사용해야 했습니다.ng-options 아이디(ID 비교).
내 모델이 오브젝트로 초기화되었을 때 ng-options에 ind(object)를 사용해야 했습니다.(객체 비교)
<select data-ng-options="ind.ID as ind.Display_Text for ind in arrIndustries"
data-ng-model="projIndustry" ng-change="onIndChange()" />
angular 2+ 를 사용하고 있는 경우는, 다음과 같이 동작합니다.`
<mat-select matNativeControl placeholder="Select Item" [(ngModel)]="selectedItem" name="selectedCaseStudyName" (selectionChange)="onSelectionChangeHandler($event)" [ngStyle]="{'background-color':'silver'}">
<mat-option *ngFor="let item of myItemList" [value]="item.ItemName">
{{item.ItemName}}
</mat-option>
</mat-select>`
.ts에서는
'selectedItem = myItemList[2].ItemName'
myItemList는 필드 중 하나가 ItemName인 개체 목록입니다.중요한 점은 [(ngModel)]을(를) 선택한 변수에 바인딩하는 것입니다.항목을 선택한 다음 목록의 필요한 인덱스로 초기화합니다.바인드 할 때마다[(ngModule)], Import, Import, Import, Import를 꼭 해 주세요NgModule
import {ngModule} from '@angular/core';
언급URL : https://stackoverflow.com/questions/14297560/how-to-make-a-preselection-for-a-select-list-generated-by-angularjs
'programing' 카테고리의 다른 글
| 스프링 부트부터 스태틱html을 사용하려면 어떻게 해야 하나요? (0) | 2023.03.05 |
|---|---|
| wc_admin_report에서 get_order_report_data 함수를 덮어쓰는 방법을 Word press 합니다. (0) | 2023.03.05 |
| WordPress의 플러그인 기능 재정의 (0) | 2023.03.05 |
| Jest URL.create ObjectURL이 함수가 아닙니다. (0) | 2023.03.05 |
| useMemo vs. useEffect + useState (0) | 2023.03.05 |