gpt4 book ai didi

javascript - 选择项目时,AngularJS 选择框选项消失

转载 作者:行者123 更新时间:2023-12-03 00:47:58 25 4
gpt4 key购买 nike

我使用 Angularjs 创建了一个绑定(bind)到模型的选择框。选择框选项正确加载,但一旦选择任何单个选项,所有选项都会从选择框中消失。发生这种情况的原因是什么以及如何防止我的选项消失?

演示该问题的 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>

关于javascript - 选择项目时,AngularJS 选择框选项消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15816400/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com