AngularJS: 使用ng-option生成下拉框并在controller调用

huaixiaoz 发布于2019-08-19 14:38 / 2660人阅读

摘要：写的时候碰到很多问题，因为刚开始用，写法思路还是和写相似，导致与在一个生成下拉框时花费了个小时才最终搞定。不自觉的用自己所熟悉的方式思考问题，付出了惨重的代价

实在是不能对jquery的ajax方法和基于页面dom的各种取值、传值方法满意（虽然jquery已经解救过我一次了），刚好手上这个项目用jquery的方法写了一半，决定试试很久以前自学的angularJS，把现在项目中jquery得部分用angularJS重写一遍。

写的时候碰到很多问题，因为刚开始用，写法思路还是和写jquery相似，导致与在一个生成select option下拉框时花费了2个小时才最终搞定。

普通html select option, 需要该字段名称name，选线id，选项label

jquery的取选项得做法

select_id = $("#data_select option:selected").val();

jqueryde的思路大概是上面这样的，但是使用了angularJS后，着实让我迷惑了

angularJS在select下使用ng-option 标签生成选项实例

...

看见这个输出，我发现没法把id写在option > value上

这岂不是无法获取选项信息了？这不行，万万不行。结果开始了长时间的google，还是没有解决办法，就只能生成这种只有label的option，这咋办呢？难道要用ng-repeat生成option？

我甚至开始这么尝试了，但是我的理智战胜了偷懒的邪念，决定通过ng-click取model里的值看一看，结果console.log出来一看，发现自己一个多小时都傻x了。看看console里的结果：

Object {bubble_name: "ab", bubble_description: "b", x: Object, y: Object, series: Object}
    bubble_description: "b"
    bubble_name: "ab"
    series: Object
    x: Object
    y: Object
        date: "2014-03-11 09:03:22"
        description: ""
        disable_flag: "1"
        id: "9"
        name: "y3"
        position: "1"
        team_id: "8"
        type: "y"
    __proto__: Object
    __proto__: Object

angularJS根据model的名称早就把每个相关的input的值自动放在Object中了

根本不在需要什么value=‘id’，只要把model的object从接口中取出来，放在html页面上，、选中的option的全部数据angularJS自动就帮我取到controller中得点击事件中去了。

不自觉的用自己所熟悉的方式思考问题，付出了惨重的代价

GPU云服务器云服务器 html生成下拉列表 js生成季度下拉框并在 js 调用生成二维码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78047.html

angular 的 select 中 ng-options 设置默认值

摘要：的中设置默认值在开发的后台系统中，经常需要对后台数据进行修改，而在修改数据的过程中，若页面中有下拉框，需要让其选中原来的数据，即中需要设置默认值。默认值设置方法在中使用绑定数据，在对应的中定义全局数据，并为其赋值，该值即为的默认值。 angular 的 select 中 ng-options 设置默认值在AngularJS 开发的后台web系统中，经常需要对后台数据进行修改，而在修改...

omgdog 2019-08-20 12:29 评论0 收藏0
AngularJS简述

流行框架简介 angularjs是一款非常优秀的前端高级JS框架，由谷歌团队开发维护，能够快速构建单页web应用，化繁为简无论是angularjs还是jQuery都是用原生JS封装的库：对代码进行封装，调用封装的方法，简化操作传统方式是用get方式获取元素，然后点方法 jQuery库实现了对获取方式的封装，对方法的封装框架：提供代码书写规则，按照规则去写代码，框架会帮我们实现响应的功能...

Jason 2019-08-23 11:25 评论0 收藏0
AngularJs 功能（三）--数据绑定丶作用域

摘要：功能数据绑定的双向数据绑定，一方面可以做到变化驱动了中元素变化，另一方面也可以做到元素的变化也会影响到。其次告诉，对页面上的这个进行双向数据绑定。第三告诉，在这个指令模版上显示这个的数据。作用域是一个把一个元素连结到上的对象。功能数据绑定 AngularJS的双向数据绑定，一方面可以做到model变化驱动了DOM中元素变化，另一方面也可以做到DOM元素的变化也会影响到Model。 ...

joywek 2019-08-22 13:54 评论0 收藏0
angularjs初识

摘要：总的来说，收获很大。这里这里就以一些常用的标签谈谈中的基础知识。然后还有一个表示记录的索引号，从开始。已经用这个数组的值替他们分好了组了，是不是感觉很强大，还有很多强大的地方等着我们去学习，掌握它，还有更强大的等着我们。周三的时候跟着老师简单的入门了angularjs，然后去图书馆找了一本《Angularjs实战》来看了看，虽然这本书网上的评价不太高，但对于初学者的我来说还是不错的，...

tanglijun 2019-08-23 11:49 评论0 收藏0
angularJS directive用法详解

摘要：可选参数，布尔值或者对象默认值为，可能取值默认值。布尔值或者字符，默认值为这个配置选项可以让我们提取包含在指令那个元素里面的内容，再将它放置在指令模板的特定位置。前言最近学习了下angularjs指令的相关知识，也参考了前人的一些文章，在此总结下。欢迎批评指出错误的地方。 Angularjs指令定义的API showImg(https://segmentfault.com/img...

hlcc 2019-08-20 11:09 评论0 收藏0