AngularJs ng- HTML select上的选项不绑定到模型
AngularJS是一种流行的前端开发框架，它提供了一种便捷的方式来构建动态的Web应用程序。在AngularJS中，ng-是指令的前缀，用于指定特定的行为或功能。
对于HTML select元素上的选项不绑定到模型的问题，可能是由于以下几个原因导致的：
- ng-model未正确绑定：确保在select元素上使用了ng-model指令，并将其绑定到相应的模型变量。例如，ng-model="selectedOption"将select的选中值绑定到名为selectedOption的模型变量。
- ng-options未正确配置：使用ng-options指令来动态生成select的选项。确保正确配置ng-options指令，以便从模型中获取选项列表，并将其绑定到select元素。例如，ng-options="option.value as option.label for option in options"将options数组中的每个选项的value属性作为选项的值，label属性作为选项的显示文本。
- 数据源未正确加载：如果选项列表是从后端或其他数据源获取的，确保在加载数据源之前不要尝试绑定选项。可以使用AngularJS的异步请求或承诺来确保数据加载完成后再绑定选项。
- 选项值类型不匹配：确保选项的值与模型变量的类型匹配。如果模型变量是字符串类型，而选项的值是数字类型，可能会导致绑定失败。可以使用parseInt()或parseFloat()等函数将选项的值转换为相应的类型。
相关·内容
我是Angularjs的新手，我一直在尝试让我的第一个Angularjs屏幕工作几天，但没有成功。我的屏幕相当简单。这是一个带有几个html选择下拉框的jsp页面。加载页面时，控制器(通过服务模块)调用驻留在Java EE后端的web服务，以返回数据以填充页面上的两个HTML select元素。我已经验证了调用确实有效，并且控制器以正确的JSON格式接收数据，即id、名称对
浏览 18提问于2018-01-12得票数 0
<select ng-model="Country" id="Country" class="select2" ng-change="viewState()"> <option ng-repeat="Country in AllCountry"
ng-
浏览 1提问于2019-06-26得票数 0
禁用“选项”AngularJS元素的“AngularJS”方法是什么？Plunk链接：<!-- CODE END -->“选项”元素标记在所有四个“select”元素标记中都具有相同的属性。()
他们使用的是
浏览 1提问于2016-07-01得票数 0
回答已采纳
1回答
我有一个方案，我认为这是合乎逻辑的，但似乎角不支持它。元素，其中包含来自userTypes的选项列表，这些选项将值绑定到" value“属性，文本绑定到" text”属性，并将select值绑定到数组对象的" value“属性，允许用户从代码中设置值。因此，当我使用以下代码创建用户时
$scope.user = new User("9&quo
浏览 5提问于2014-10-27得票数 0
回答已采纳
我当前正在尝试在select中显示存储在API中的类别列表，但我无法让我的select显示它。我的类别列表存储在标签中(类别是一个数组，里面有多个对象，这些对象的属性为‘storageService.poi.categories’，这就是我试图显示的，例如: storageService.poi.categories.label将显示'TreeStart')
我已经找了好几个小时了，这应该是可行的(我想?)<selec
浏览 3提问于2016-11-18得票数 0
我使用angularjs运行这个简单的代码：<div ng-app ng-controller="AController">function AController($scope) {}
当索引到数组时，绑定
浏览 3提问于2014-02-17得票数 3
回答已采纳
1回答
我已经开始学习角js一段时间了，到目前为止，我已经使用了两种类型的前缀。他们是ng-和data-ng。但是当我进入角度库时，我发现了这个数组。var ngAttrPrefixes = ['ng-', 'data-ng-', 'ng:', 'x-ng-'];
因此，这意味着有4种类型的前缀可用角。那么，彼此之间有什么区别呢？
浏览 2提问于2017-01-26得票数 1
回答已采纳
我正在学习AngularJS，并且遇到了一个奇怪的问题，有时如果我在JS文件中进行了更改，更改将不适用。有没有什么缓存是我需要知道的？我正在使用Laravel 5.1，但是在这一点上，Laravel实际上只处理路由。
最终，这些变化都会实现。我是不是疯了，或者这是我应该知道的</e
浏览 0提问于2015-12-19得票数 0
这让我对ng-model的作用感到困惑，在这种情况下，我认为只需添加ng-options，它就可以工作，但实际上不是。<!doctype html> <head> font: 16px/1.5
浏览 1提问于2014-02-27得票数 1
我是网页设计的新手，我试图用ng模型和angularjs将我的输入标签与我的选择标签绑定起来。最终，我希望用户从数组中选择一个元素，输入标签的占位符将具有用户选择的值。用户可以在输入框中键入某些内容，select标记中的元素也会发生变化，就像编辑功能一样。到目前为止，我的代码是这样的。
<!div class="form-group&
浏览 1提问于2014-07-17得票数 0
回答已采纳
我创建了简单的angularJS应用程序，我使用ng-重复将数据绑定到DOM </div>
太奇怪了，我的数据不绑定到DOM，直到我点击任何按钮“n
浏览 0提问于2015-05-14得票数 0
回答已采纳
我做了一个小的angularjs应用程序，用户选择一个月，然后页面显示适当的苍蝇(如飞钓)使用。我可以让它的一部分发挥作用，但另一种不行。function($routeProvider){ .when('/home', { })
.whe
浏览 2提问于2016-10-28得票数 0
回答已采纳
<select id="select"> <option value="2" data-foo="cats">that</option>
<option value="3" data-foo="gerbils">other&
浏览 2提问于2018-05-09得票数 1
回答已采纳
我正在尝试实现具有角ng选项的loudev多重选择。问题是，它不返回错误，但选择列表是空的。<select ng-options="item.label for item in list"
lp-multi-select multiple="multiple"class="multi-select" ng-model="$scope.selected"></<e
浏览 4提问于2017-03-30得票数 0
我只是在学习AngularJS，我甚至不知道谷歌该用什么来解决这个问题(这个问题的标题没有返回我想要的东西)。我在表中显示了大量记录(我将从自定义的SharePoint列表中通过REST获取这些记录)。该项目的要求是用户可以键入一个输入控件来筛选列表(工作！)还可以使用select控件根据状态筛选记录集。在一些帮助下，我在工厂中有一个函数来返回没有“关闭”作为状态的数据子集。我尝试使用ng-model="techFilter“作为select，但这破坏了一切。
浏览 3提问于2014-04-21得票数 0
回答已采纳
我正在为我的应用程序使用Angularjs，我正在尝试用动态值自动填充选择框。 model="exam.courseName" required="">data-ng-value="{{courseforstudent.courseName}}">
{{cours
浏览 1提问于2017-09-26得票数 1
2回答
从ng重复开始
、、、、
在列表项中，当我这样做(例如，第一项)时，它会给我Qte = {{product.Qte}}<select ng-change="product.Qte = selectedQte">ng-in
浏览 0提问于2015-09-14得票数 1
回答已采纳
2回答
现在我已经用了几个星期的时间使用了weeks，我想我已经有MVC了。数据的表示。它是模块拥有的变量.Colour = blue。然后，该数据将显示在数据的显示。物理HTML。只要它帮助或更改数据显示为视图，反之亦然，就像控制器的情况一样，这并不重要。对于MVT来说，这是一种正确的思维方式吗？如果没有，为什么？
浏览 5提问于2016-04-21得票数 1
回答已采纳
我希望在角(1.0)中创建一个具有默认选项的选择列表，该列表具有值。我不明白为什么，但是当我向默认选项添加一个值时，它就不正确了。我的代码是：<html ng-app="myApp">
<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6>
</body&g
浏览 0提问于2018-03-05得票数 3
回答已采纳
1回答
如何将'p‘绑定到value属性？如果我如前所述，模型被绑定为JSON字符串，而不是模型本身(如果我能够使用ng-选项的话)。我现在通过使用ng更改函数来解决这个问题，该函数使用绑定到fruits的值作为$scope.produce中的查找，但这似乎是一种解决方案，而不是解决方案。以下是一些帮助说明我的问题的小摆设：
** ** ng-</em
浏览 3提问于2014-01-31得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
