`

Angularjs ng-options循环json数据问题及解决方案

阅读更多

1、数据

 

[{"code":"subwayLine1"},{"code":"subwayLine2"},{"code":"subwayLine3"},{"code":"subwayLine4"},{"code":"subwayLine5"},{"code":"subwayLine6"},{"code":"subwayLine7"},{"code":"subwayLine8"}]

 

 

2、ng-options循环下拉列表

 

<select class="form-control" ng-model="code" ng-options="v.code for v in codeList">
  <option value="">--请选择--</option>
</select>

 结果查询参数错误(code: $scope.code):

form表单内容:

code[code]:subwayLine1

 解决方案之一:

var params = {
  code: $scope.code
};

 

解决方案之二:

<select class="form-control" ng-model="code">
  <option value="">--请选择--</option>
  <option ng-repeat="v in codeList">{{v.code}}</option>
</select>

 

ng-options使用指南:http://each.sinaapp.com/angular/tutorial/ng-options.html

 

 

 

若有疑问,请发表评论或添加微信为你解答:

更多实例应用扫码体验:

分享到:
评论

相关推荐

    AngularJS基础 ng-options 指令详解

    ng-options指令的一个常用场景是与AngularJS的数据绑定结合使用,这样可以实现在选中下拉列表项时自动更新模型值。例如,如果我们有一个名字数组,并且我们希望用户能够从中选择一个名字,我们可以这样编写HTML代码...

    AngularJS中ng-options实现下拉列表的数据绑定方法

    在AngularJS中,`ng-options`指令用于在`&lt;select&gt;`元素中动态生成下拉列表选项,实现数据绑定。这个指令使得我们可以轻松地将后台数据模型与用户界面交互结合,提供了一个灵活的方式来处理复杂的列表展示。 1. **...

    AngularJS实现在ng-Options加上index的解决方法

    本文主要介绍了解决在ng-Options中添加索引的方法,包括遇到的问题和最终的解决方案。 首先,尝试直接在ng-Options中添加索引会出现问题,因为在JavaScript中,对象的属性(键值对的键)是无序的。这意味着,如果...

    angular指令笔记ng-options的使用方法

    `track by`是`ng-options`的一个关键部分,它的主要作用是为了解决数据重复导致的问题。在 AngularJS 中,每个`&lt;option&gt;`元素都需要一个唯一的值来与DOM元素绑定。如果数据源中存在重复值,`ng-repeat`可能会遇到...

    前端项目-ng-jsoneditor.zip

    例如,你可以设置`options`属性来自定义编辑器的行为,如展示模式(文本、树形、表单等)、初始数据、颜色方案等。 为了开始使用【ng-jsoneditor】,你需要完成以下步骤: 1. 安装:首先,确保你的项目已经集成了...

    详解使用angularjs的ng-options时如何设置默认值(初始值)

    文档中提到的另一种尝试是使用`ng-init`指令,但未能解决问题,原因在于`ng-init`仅是表达式的初始化,并不会直接作用于ng-model。因为ng-model的值是根据返回的动态数据决定的,所以在数据实际返回并填充到下拉列表...

    angularjs ui-select2 多选下拉所需资源文件

    AngularJS通过数据绑定和依赖注入机制简化了前端开发,而ui-select2是AngularJS对select2插件的封装,使我们在Angular应用中能无缝使用select2的功能。ui-select2不仅提供了基本的下拉列表功能,还支持搜索、分页、...

    element-plus---Cascader三级联动地区选择---json数据

    在这个场景中,"element-plus---Cascader三级联动地区选择---json数据" 主题指的是使用Element Plus的Cascader组件来实现中国地区的三级联动选择,数据格式为JSON。 首先,我们来看Cascader组件。Cascader 是一个...

    AngularJS使用ng-options指令实现下拉框

    总结来说,AngularJS的`ng-options`指令提供了构建动态下拉列表的高效方法,结合`ng-model`实现了数据的双向绑定。通过灵活的表达式配置,可以适应各种复杂的数据结构和需求。这个功能强大的指令是AngularJS中构建...

    AngularJS动态绑定ng-options的ng-model实例代码

    在AngularJS中,`ng-model`和`ng-options`是两个非常重要的指令,它们用于双向数据绑定和构建可交互的表单元素,尤其是下拉选择列表。本文将深入探讨如何在特定情况下动态绑定`ng-model`,以实现与`ng-options`的...

    AngularJS实现select的ng-options功能示例

    在AngularJS中,`ng-options`指令用于动态生成`&lt;select&gt;`元素的选项。这个功能强大的指令使得在处理数据绑定时能更灵活地构建下拉列表。在标题和描述中提到的示例中,`ng-options`被用来根据`themeData`数组生成`...

    angularjs select 赋值 ng-options配置方法

    在AngularJS中,`ng-options`指令用于动态生成HTML `&lt;select&gt;` 下拉列表。这个指令提供了灵活的方式来...在实际开发中,结合AngularJS的双向数据绑定特性,`ng-options`能够高效地处理用户交互,提高应用的用户体验。

    angularJs中ng-model-options设置数据同步的方法

    总而言之,ng-model-options是AngularJS中一个强大的功能,它不仅能够帮助开发者解决数据同步的痛点,还可以通过减少不必要的数据绑定更新来提高网页的性能和响应速度。在开发大型Web应用时,合理利用ng-model-...

    AngularJS基础 ng-model-options 指令简单示例

    AngularJS ng-model-options 指令 AngularJS 实例 在失去焦点时绑定输入框的值到 scope 变量中: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=utf-8&gt; [removed][removed] &lt;/head&gt; &...

Global site tag (gtag.js) - Google Analytics