当一个项被选中时,AngularJS的选择框选项就会消失
AngularJS select box options disappear when an item is selected
我使用Angularjs创建了一个绑定到模型的选择框。选择框选项正确加载,但一旦选择任何一个选项,所有选项就会从选择框中消失。发生这种情况的原因是什么?我该如何避免我的选择消失?
Plunker链接演示问题: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>
JavaScript 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
值使用不同的作用域属性。
这是一个更新的柱塞: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>
相关文章:
- AngularJS-在JSON选择器中使用变量名
- AngularJs列表ng单击以选择选项转换
- 如何放置'选择'基于angularJS中数据的html选项
- 如何更改<选择>使用angularJS从控制器获得的值
- AngularJS ng选项在选择一个选项后删除了默认的空白值
- 在angularjs UI网格列中选择下拉菜单不适用于外部editcellTemplate
- LEAFLET地图和带有选择选项的标记-ANGULARjs
- Angularjs:如何让ui选择只有一种方式的模型竞标
- AngularJS自定义日期选择器指令
- ng-单击在IE中不起作用的选项选择Angularjs
- 在选项中选择angularJS不工作
- 单元素选择&Angularjs中的多元素选择
- UI选择angularjs设置maxlength为输入值(UI选择匹配)
- 如何在第一次加载时选择AngularJS模型
- 使用函数参数选择angularjs变量
- 选择angularjs ng-repeat中的第一个元素
- 选择AngularJS选项
- 如何显示用户's选择angularjs
- 显示/隐藏<tr>根据下拉选择-angularjs
- 选择angularJS中的所有复选框