각도로 선택 초기화 중JS 및 ng-반복
AngularJS 1.1.5에서 ng-repeat을 사용하여 미리 채워진 옵션으로 Select-box를 시작하려고 합니다.대신 선택 항목은 항상 아무것도 선택하지 않은 상태로 시작됩니다.빈 옵션도 있는데, 저는 그것을 원하지 않습니다.저는 아무것도 선택되지 않는 부작용이 있다고 생각합니다.
ng-repeat 대신 ng-options를 사용하여 작업을 할 수 있지만, 이 경우 ng-repeat을 사용하고 싶습니다.압축한 예에서는 알 수 없지만, 각 옵션의 타이틀 속성을 설정하고 싶기 때문에 ng-options를 사용하여 설정할 수 있는 방법은 없는 것으로 알고 있습니다.
나는 이것이 일반적인 AngularJs 범위/프로토타입 상속 문제와 관련이 없다고 생각한다.적어도 나는 바타랑에서 검사할 때 눈에 띄는 것이 아무것도 보이지 않는다.또한 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>
JavaScript:
function AppCtrl($scope) {
$scope.filterCondition={
operator: 'eq'
}
$scope.operators = [
{value: 'eq', displayName: 'equals'},
{value: 'neq', displayName: 'not equal'}
]
}
JS Fidle : http://jsfiddle.net/coverbeck/FxM3B/2/
네. 올바른 방법을 사용하지 않으려면ng-options, 추가할 수 있습니다.ng-selected에 대한 상태 체크 로직을 가진 Atributeoption사전 선택 작업을 수행하도록 지시합니다.
<select ng-model="filterCondition.operator">
<option ng-selected="{{operator.value == filterCondition.operator}}"
ng-repeat="operator in operators"
value="{{operator.value}}">
{{operator.displayName}}
</option>
</select>
선택 태그의 경우 angular는 ng-options 디렉티브를 제공합니다.옵션을 설정하고 기본값을 설정할 수 있는 특정 프레임워크를 제공합니다.다음은 예상대로 동작하는ng-module을 사용한 업데이트된 바이올린입니다.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>
앵글이 빈 옵션 요소를 선택 항목에 주입하고 있다는 사실은 기본적으로 Angular에 바인딩된 모델 객체가 초기화할 때 빈 값으로 제공된다는 것입니다.
기본 옵션을 선택하려면 컨트롤러의 스코프에서 설정할 수 있습니다.
$scope.filterCondition.operator = "your value here";
빈 옵션 플레이스 홀더를 원하는 경우 이 옵션을 사용할 수 있습니다.
<select ng-model="filterCondition.operator" ng-options="operator.id as operator.name for operator in operators">
<option value="">Choose Operator</option>
</select>
The Sharpie One이 ng-selected 옵션을 지적해 주셔서 감사합니다.만약 그것이 코멘트가 아닌 답변으로 게재되었다면, 저는 그것을 정답으로 했을 것입니다.
여기 JSFiddle이 있습니다.http://jsfiddle.net/coverbeck/FxM3B/5/
또한 문제의 원인이 아니기 때문에 원래 투고에서 누락되었던 타이틀 속성을 사용하도록 바이올린을 업데이트했습니다(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'}
]
}
제안하신 바와 같이 ng-options를 사용해야 합니다만, 안타깝게도 어레이 요소를 디폴트로 참조할 필요가 있다고 생각합니다(어레이가 문자열 배열이 아닌 경우).
JavaScript:
function AppCtrl($scope) {
$scope.operators = [
{value: 'eq', displayName: 'equals'},
{value: 'neq', displayName: 'not equal'}
]
$scope.filterCondition={
operator: $scope.operators[0]
}
}
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>
및 material을 하는 경우 md-select 'ng-repeat md-option from angular material'을 할 수 .ng-model-options="{trackBy: '$value.id'}"이 펜에 표시된 md-select 태그 애쉬로 이동합니다.
코드:
<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
'programing' 카테고리의 다른 글
| FormControl은 무엇에 사용됩니까?왜 쓰이죠?사용방법 (0) | 2023.02.15 |
|---|---|
| 예외:'ngFor'는 알려진 네이티브 속성이 아니므로 바인딩할 수 없습니다. (0) | 2023.02.15 |
| Angular의 필터에서 범위 변수에 액세스합니다.JS (0) | 2023.02.15 |
| 라이브러리 반응 테스트 vs Jaek (0) | 2023.02.15 |
| WooCommerce 숍 페이지의 Ajax Add to Cart 버튼에 수량 필드 추가 (0) | 2023.02.15 |