ng-options的写法

最新推荐文章于 2019-06-17 09:40:11 发布

原创最新推荐文章于 2019-06-17 09:40:11 发布 · 456 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ng-options #angularJs #select

本文介绍如何在AngularJS中使用ng-options指令为下拉框进行数据绑定，并通过示例代码展示了如何获取选中项的ID而非仅显示其名称。

首先默认给个地址

$scope.city="北京";

$scope.oList=[{

    areaId:1,areaTitle:"北京"

}]

<select   ng-options="value.areaId as value.areaTitle for value in oList" ng-model="city" ng-change="cityChange(city)" >
<option value="" >所在省</option>

</select>

oList是请求数据data赋值的。

如果不写as 那么就只拿到地名，而加了as ，通过绑定的$scope.city 拿到北京的id

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

blueBings

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

angular里ng-options、ng-select是如何使用的？

IT修真院：初学者转行到互联网的聚集地

05-29

1097

这里是修真院前端小课堂，每篇分享文从【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】八个方面深度解析前端知识/技能，本篇分享的是：【angular里ng-options、ng-select是如何使用的？】腾讯视频 ng-options和ng-select都属于angluar里的作用在表格或者下拉菜单的标签。 ng-op...

Angular中ng-template和ng-container的应用

小王的技术库

07-29

2649

Angular的日常工作中经常会使用到ng-template和ng-container，本文对他们做一个总结。ng-template是一个Angular元素，它不会直接显示出来。在渲染视图之前，Angular会把它的内容替换为一个注释。ng-template是用来定义模板的，当定义好一个模板之后，可以用ng-container和ngTemplateOutlet指令来进行使用。简单点来说，就是定义了一个模板片段，并且起了一个名字，在需要的时候可以通过名字来使用这个片段。作用域的Template 带作用域

参与评论您还未登录，请先登录后发表或查看评论

ng-options用法详解

smile_panda的博客

03-18

1492

ng-options属性可以在表达式中使用数组或对象来自动生成一个select中的option列表。ng-options与ng-repeat很相似，很多时候可以用ng-repeat来代替ng-options。

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

10-19

本篇文章主要介绍了AngularJS动态绑定ng-options的ng-model实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

ng-options和ng-checked在表单中的高级运用(推荐)

10-20

AngularJS是当前非常的流行的前端框架，它的语法糖非常多，也极大的方便了前端开发者。这篇文章主要介绍了ng-options和ng-checked在表单中的高级运用,需要的朋友可以参考下

ng-option 的两种写法

fn_2015的博客

01-07

750

1、 ng-options="xlsbName for xlsbName in xlsbNames"> 总和 2、总和

[Angularjs]ng-select和ng-options

fn_2015的博客

08-28

551

ng-select ng-select用来将数据同HTML的标签进行绑定。这个指令可以和ng-model以及ng-options指令一起使用，构建精细且表现良好的动态表单。 ng-options的值可以是一个内涵表达式（comprehension expression），其实这只是一种有趣的说法，简单来说就是它可以接收一个数组或者对象，并对她们进行循环，将内部的内容提供给select标

Angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？

learning_web的博客

06-17

760

这里是修真院前端小课堂，每篇分享文从八个方面深度解析前端知识/技能，本篇分享的是：【Angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？】目录 1.背景介绍 2.知识剖析 3.常见问题 4.解决方案 5.编码实战 6.扩展思考 7.参考文献 8.更多讨论 1.背景介绍指令是一个Dom元素上的标签(和元素上的属性,C...

Angular--ng-options

冷月心的博客

04-02

1331

Angular--ng-options用途下拉菜单组成适用情形一，普通数组适用情形二（数组嵌套对象）适用情形三（普通对象）用途 ng-options属性特别的好用，可以智能的从控制器中取值当前的值做选项，用在下拉菜单里边下拉菜单组成组成就两个东西，一个是显示的东西，叫label，一个是要提交的值，叫value 以打折为例，呈递到界面的选项是五折六折七折，真正提交的是0.5,0.6,0....

angularjs select 赋值 ng-options配置方法

11-28

数组方式数据是数组 $scope.years = [2014, 2015, 2016]; 页面元素 <select ng-model="item" ng-options="item as y for y in years"> </select> 设置默认值如果需要设置默认的选项，可以先设置一个参数： $scope.item = 2016; $scope.years = [2014, 2015, 2016]; 对象数组方式数据是对象数组 $scope.sites = [ {site : "baidu", url : "https://www.baidu.com"}, {si

angular指令笔记（一）：ng-options

weixin_34288121的博客

09-15

214

1、ng-options指令用途：在表达式中使用数组或对象来自动生成一个select中的option列表。ng-options与ng-repeat很相似，很多时候可以用ng-repeat来代替ng-options。但是ng-options提供了一些好处，例如减少内存提高速度，以及提供选择框的选项来让用户选择。当select中一个选项被选择，该选项将会使用ng-model自动绑定到对应数据上。如...

Angular.js之ng-options用法

暮水的专栏

09-27

3419

官网介绍：最简单的例子（基本下拉）： html:<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="myCtr

ng-options的使用

sun_playboy的博客

04-03

527

1.使用ng-options遍历数组<select ng-model="selectedName" ng-options="x for x in names"></select>.$scope.names=["Volvo","BMW","Auto"];其中右侧x表示selectName的值,左侧x是表示select中的选项.2.使用ng-options遍

ng-options详解

编程之路

08-08

988

Title var app = angular.module('myApp',[]); app.controller('myControl',['$scope',function($scope){ $scope.colors =[ {name:'black',shade:'dark'},

AngularJs——ng-options总结

佑右的专栏

09-22

2713

1、最平常的一种形式

angularjs中ng-options的用法

menghuanzhiming的博客

08-13

1667

ng-options 四种用法： 1.基本用法（显示 o 对象的某一个属性值作为下拉名称）： ng-options = "o.attr for o in dataArr" 2.显示更多：同一对象显示更多下拉名称（比如需要显示 o 对象的两个或更多个属性值作为一个下拉列表项）: ng-options = "(o.attr1 + ‘-’ + o.attr2) for o in dataArr

《我的Angular入坑记》——ng-options的使用

皮蛋瘦肉没有肉

04-21

4885

ng-options 指令用于使用填充元素的选项，当select中一个选项被选择，该选项将会被绑定到ng-model。 ng-options 指令使用数组或对象来填充下拉列表，多数情况下与 ng-repeat 指令一起使用。 Title 请选择城市 {{city}} var m =

Default IDE Q- 7CXE+- The function argument is equal to t Reports chained comparisons that can be simplified. Too complex chained comparisons A Tuple assignment balance is incorr A Example: Tuple item assignment is prohibitec A def do_comparison(x): Type in docstring does not match i A xmin = 10 Unbound local variables xmax = 100 Unclear exception clauses if x >= xmin and x <= xmax: Unnecessary backslash pass Unreachable code Unresolved references The IDE offers to simplifv if x >= xmin and x <= Unsatisfied package requirements Unused local symbols Using equality operators to compar A Wrong arguments to call super Wrong order of 'except' clauses > Qodana Options > RegExp - > RELAX NG ReST Sass/SCSS Disable new inspections by default 什么错误

最新发布

08-09

Qodana静态分析工具报告的代码问题通常反映代码中存在潜在的错误或不符合最佳实践的情况。以下是您提到的几种常见问题的含义及修复建议： ### 1. Chained Comparisons（链式比较）链式比较指的是在编程中将多个比较操作符连接使用，例如`a < b < c`。虽然在某些语言（如Python）中这种写法是合法的，并且可以提高代码的可读性，但在其他语言（如Java或C++）中这可能导致语法错误或逻辑错误。例如，在Java中`a < b < c`会被解释为`(a < b) < c`，其中布尔值`true`被视为1，`false`被视为0，这可能不是预期的行为[^1]。 **修复方法**：在不支持链式比较的语言中，应拆分为多个比较条件，例如`if (a < b && b < c)`。 ### 2. Tuple Assignment Errors（元组赋值错误）元组赋值错误通常发生在尝试将一个元组解包到变量时，变量数量与元组元素数量不匹配。例如，在Python中，如果尝试执行`x, y = (1, 2, 3)`，则会引发`ValueError`，因为左侧只有两个变量，而右侧有三个元素[^1]。 **修复方法**：确保变量的数量与元组中的元素数量完全匹配，或者使用`*`操作符捕获剩余的元素。例如： ```python x, y, *rest = (1, 2, 3, 4) ``` ### 3. Unbound Variables（未绑定变量）未绑定变量是指在代码中使用了未定义或未初始化的变量。例如，在Python中，如果在函数中尝试访问一个尚未赋值的变量，则会引发`UnboundLocalError`，因为解释器认为该变量是局部变量，但在使用前未被赋值[^1]。 **修复方法**：确保在使用变量之前对其进行赋值，或者在适当的作用域内声明变量。例如： ```python def example(): x = 10 # 在使用前赋值 print(x) ``` ### 4. Unreachable Code（不可达代码）不可达代码指的是程序中永远不会被执行的代码段。这通常发生在`return`、`break`、`continue`等控制流语句之后。例如： ```python def example(): return 10 print("This will never be printed") # 不可达代码 ``` **修复方法**：移除不可达代码，或者重新设计控制流以确保代码逻辑合理。例如： ```python def example(): print("This will be printed") return 10 ``` ### 5. 其他常见问题除了上述问题外，Qodana还可能报告其他类型的代码问题，如类型不匹配、未使用的变量、潜在的空指针异常等。这些问题通常可以通过静态分析工具提供的具体提示进行修复。 ---