AngularJS 및 ng-repeat를 사용하여 선택 초기화
AngularJS 1.1.5에서 ng-repeat를 사용하여 미리 채워진 옵션으로 시작하기 위해 선택 상자를 얻으려고합니다. 대신 선택은 항상 선택된 항목으로 시작합니다. 또한 빈 옵션이 있으며 원하지 않습니다. 나는 아무것도 선택되지 않은 부작용이 있다고 생각합니다.
ng-repeat 대신 ng-options를 사용 하여이 작업을 수행 할 수 있지만이 경우에는 ng-repeat를 사용하고 싶습니다. 내 좁혀진 예제는 그것을 보여주지 않지만 각 옵션의 title 속성을 설정하고 싶습니다. 내가 아는 한 ng-options를 사용하여 그렇게 할 수있는 방법이 없습니다.
나는 이것이 일반적인 AngularJs 범위 / 프로토 타입 상속 문제와 관련이 있다고 생각하지 않습니다. Batarang에서 검사 할 때 적어도 분명한 것이 보이지 않습니다. 또한 UI를 사용하여 선택 항목에서 옵션을 선택하면 모델이 올바르게 업데이트됩니다.
HTML은 다음과 같습니다.
<body ng-app ng-controller="AppCtrl">
<div>
Operator is: {{filterCondition.operator}}
</div>
<select ng-model="filterCondition.operator">
<option
ng-repeat="operator in operators"
value="{{operator.value}}"
>
{{operator.displayName}}
</option>
</select>
</body>
그리고 자바 스크립트 :
function AppCtrl($scope) {
$scope.filterCondition={
operator: 'eq'
}
$scope.operators = [
{value: 'eq', displayName: 'equals'},
{value: 'neq', displayName: 'not equal'}
]
}
이것에 대한 JS 피들 : http://jsfiddle.net/coverbeck/FxM3B/2/
확인. 올바른 방법을 사용하지 않으려면 지시문에 대해 사전 선택 작업을 수행하기 위해 조건 확인 논리와 함께 속성을 ng-options추가 할 수 있습니다 .ng-selectedoption
<select ng-model="filterCondition.operator">
<option ng-selected="{{operator.value == filterCondition.operator}}"
ng-repeat="operator in operators"
value="{{operator.value}}">
{{operator.displayName}}
</option>
</select>
select 태그의 경우 angular는 ng-options 지시문을 제공합니다. 옵션을 설정하고 기본값을 설정하는 특정 프레임 워크를 제공합니다. 예상대로 작동하는 ng-options를 사용하여 업데이트 된 바이올린은 다음과 같습니다. http://jsfiddle.net/FxM3B/4/
업데이트 된 HTML (코드는 동일하게 유지됨)
<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator}}</div>
<select ng-model="filterCondition.operator" ng-options="operator.value as operator.displayName for operator in operators">
</select>
</body>
선택된 옵션을 지적 해 주신 TheSharpieOne 에게 감사합니다 . 그것이 주석이 아닌 답변으로 게시 된 경우, 나는 그 정답을 만들었을 것입니다.
작동하는 JSFiddle은 다음과 같습니다. http://jsfiddle.net/coverbeck/FxM3B/5/ .
또한 문제의 원인이 아니기 때문에 원래 게시물에서 생략 한 title 속성을 사용하도록 바이올린을 업데이트했습니다 (그러나 ng-options 대신 ng-repeat를 사용하려는 이유입니다) .
HTML :
<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator}}</div>
<select ng-model="filterCondition.operator">
<option ng-repeat="operator in operators" title="{{operator.title}}" ng-selected="{{operator.value == filterCondition.operator}}" value="{{operator.value}}">{{operator.displayName}}</option>
</select>
</body>
JS :
function AppCtrl($scope) {
$scope.filterCondition={
operator: 'eq'
}
$scope.operators = [
{value: 'eq', displayName: 'equals', title: 'The equals operator does blah, blah'},
{value: 'neq', displayName: 'not equal', title: 'The not equals operator does yada yada'}
]
}
각도가 선택에 빈 옵션 요소를 주입한다는 사실은 기본적으로 바인딩 된 모델 객체가 초기화 될 때 빈 값으로 제공된다는 것입니다.
기본 옵션을 선택하려면 컨트롤러의 범위에서 설정할 수 있습니다.
$scope.filterCondition.operator = "your value here";
If you want to an empty option placeholder, this works for me
<select ng-model="filterCondition.operator" ng-options="operator.id as operator.name for operator in operators">
<option value="">Choose Operator</option>
</select>
As suggested you need to use ng-options and unfortunately I believe you need to reference the array element for a default (unless the array is an array of strings).
The JavaScript:
function AppCtrl($scope) {
$scope.operators = [
{value: 'eq', displayName: 'equals'},
{value: 'neq', displayName: 'not equal'}
]
$scope.filterCondition={
operator: $scope.operators[0]
}
}
The HTML:
<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator.value}}</div>
<select ng-model="filterCondition.operator" ng-options="operator.displayName for operator in operators">
</select>
</body>
If you are using md-select and ng-repeat ing md-option from angular material then you can add ng-model-options="{trackBy: '$value.id'}" to the md-select tag ash shown in this pen
Code:
<md-select ng-model="user" style="min-width: 200px;" ng-model-options="{trackBy: '$value.id'}">
<md-select-label>{{ user ? user.name : 'Assign to user' }}</md-select-label>
<md-option ng-value="user" ng-repeat="user in users">{{user.name}}</md-option>
</md-select>참고URL : https://stackoverflow.com/questions/18647098/initializing-select-with-angularjs-and-ng-repeat
'development' 카테고리의 다른 글
| 자식 체크 아웃 태그, 분기에서 자식 풀 실패 (0) | 2020.06.29 |
|---|---|
| RESTful 방식으로 자원에 대한 서버 측 메소드 호출 (0) | 2020.06.29 |
| ASP.NET Core Dependency Injection 오류 : 정품 인증을 시도하는 동안 형식에 대한 서비스를 확인할 수 없습니다 (0) | 2020.06.29 |
| 파이썬에서의 부정 (0) | 2020.06.28 |
| Docker 이미지 "레이어"란 무엇입니까? (0) | 2020.06.28 |