반응형
항목을 선택하면 AngularJS 선택 상자 옵션이 사라집니다.
Angularjs를 사용하여 모델에 바인딩된 선택 상자를 만들었습니다.선택 상자 옵션은 올바르게 로드되지만 단일 옵션을 선택하는 즉시 선택 상자에서 모든 옵션이 사라집니다.이러한 현상이 발생하는 이유와 옵션이 사라지지 않도록 하려면 어떻게 해야 합니까?
문제를 나타내는 플런커 링크:http://plnkr.co/edit/DolBIN
HTML
<html xmlns="http://www.w3.org/1999/xhtml" ng-app>
<head>
<title>Angular Test Prjoect - Home</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script type="text/javascript" src="Clinic.js"></script>
</head>
<body>
<div ng-controller="ClinicCtrl">
<select ng-options="item as item.start + '-' + item.end + ':' + item.patient.name for item in appointments" ng-model="appointments">
</select>
</div>
</body>
</html>
자바스크립트
function ClinicCtrl($scope) {
$scope.appointments = [
{ start: "900", end: "930", provider: "1", patient: {name:"Allen",dob:"8/12/1977"} },
{ start: "1000", end: "1045", provider: "1", patient: { name: "Allen", dob: "8/12/1971"} },
{ start: "1030", end: "1100", provider: "2", patient: { name: "David", dob: "11/22/1973"} },
{ start: "1100", end: "1145", provider: "2", patient: { name: "Francine", dob: "3/18/1987"} },
{ start: "1230", end: "1530", provider: "3", patient: { name: "George", dob: "4/5/1997"} },
{ start: "1300", end: "1500", provider: "3", patient: { name: "Kirkman", dob: "6/28/1970"} }
];
}
문제는 이 시스템이ng-model선택한 요소에서는$scope.appointments어레이를 선택합니다.에 다른 범위 속성을 사용합니다.ng-model가치.
갱신된 plunker:http://plnkr.co/edit/EAExby
템플릿의 변경 내용은 다음과 같습니다.
<div ng-controller="ClinicCtrl">
<select
ng-options="item as item.start + '-' + item.end + ':' + item.patient.name for item in appointments"
ng-model="selectedAppointment"
></select>
{{selectedAppointment}} <!-- log out the value just to show it's working -->
</div>
언급URL : https://stackoverflow.com/questions/15816400/angularjs-select-box-options-disappear-when-an-item-is-selected
반응형
'programing' 카테고리의 다른 글
| 대응: 상위 컴포넌트의 하위 매핑 (0) | 2023.03.14 |
|---|---|
| Angular-Chart.js 색상 변경 방법 (0) | 2023.03.14 |
| Uncaughed TypeError: 정의되지 않은 속성 'toLowerCase'를 읽을 수 없습니다. (0) | 2023.03.14 |
| POM 오류: org.springframework를 찾을 수 없습니다.기동하다 (0) | 2023.03.14 |
| WordPress 템플릿 이름을 번역하는 방법 (0) | 2023.03.14 |