本次做一个简单的关于动态生成select的练习

　　在实现上有两种方式：

　　　　其一、通过ng-repeat来实现

　　　　其二、通过ng-option来实现

　　　　在页面效果上，两种实现的效果都一样

　　　　但是在数据选择的数据从操作上有所不同

　　　　ng-repeat选中的是其option对应的value值

　　　　ng-option选择的是其对应绑定数据的一个object对象

　　在实际应用中建议采用ng-option实现

　　代码实例：

　　　　

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

</head>

<body ng-app="myApp">

    <div ng-controller="CityController">

        <div style="margin-bottom: 40px;">

            <h1>通过ng-options实现</h1>

            <select ng-model="city" id="selectCity1"

                ng-options="city1.name for city1 in cities">

                <option value="">请选择</option>

            </select>

            所选择的城市信息: {{ city }}

        </div>

        <div style="margin-bottom: 40px;">

            <h1>通过ng-repeat实现</h1>

            <select ng-model="city2" id="selectCity2">

                <option value="" selected="selected">请选择</option>

                <option ng-repeat="city in cities" value="{{city.id}}">{{city.name}}</option>

            </select>

            所选择的城市ID: {{ city2 }}

        </div>

        <div>

            <input type="text" ng-model="newCityName" placeholder="请输入新增城市的名称" />

            <input type="button" ng-click="addCity()" value="新增城市" />

        </div>

    </div>

</body>

</html>

<script src="../JS/angular.js"></script>

<script type="text/javascript">

    var app = angular.module("myApp", []);

    app.controller("CityController", function ($scope) {

        //// 初始化城市数据

        $scope.cities = [

                        { name: '成都', id: 1 },

                        { name: '南充', id: 2 },

                        { name: '绵阳', id: 3 },

                        { name: '达州', id: 4 },

                        { name: '泸州', id: 5 }

        ];

        //// 新增一个城市信息

        $scope.addCity = function () {

            if ($scope.newCityName) {

                $scope.cities.push({ name: $scope.newCityName, id: $scope.getCityMaxId() + 1 });

            }

        }

        //// 获取已有城市列表中城市ID最大值

        $scope.getCityMaxId = function () {

            var cityIdArry = new Array();

            for (var i in $scope.cities) {

                cityIdArry.push($scope.cities[i].id);

            }

            cityIdArry.sort(function (num1, num2) {

                return num1 - num2;

            });

            return cityIdArry[cityIdArry.length - 1];

        };

    });

</script>

angularjs小练习（分别通过ng-repeat和ng-option动态生成select下拉框）的更多相关文章

  1. 将select的默认小三角替换成别的图片，且实现点击图片出现下拉框选择option

    最近做项目,要求修改select下拉框的默认三角样式,因为它在不同浏览器的样式不同且有点丑,找找网上也没什么详细修改方法,我就总结一下自己的吧. 目标是做成下图效果: 图一:将默认小三角换成红圈的三角 ...

  2. 【经验】angularjs 实现带查找筛选功能的select下拉框

    一.背景 对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!so,为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有 ...

  3. 微信小程序手动实现select下拉框选择

    在小程序中没有像h5中的下拉 标签的 picker又满足部了,那就自己动手写 <view class='list-msg'> <view class='list-msg1'> ...

  4. 微信小程序 select 下拉框组件

    一.源码地址 https://github.com/imxiaoer/WeChatMiniSelect 二.效果图 录屏图片质量较差,所以大家会看到残影(捂脸) 三.组件源码 1. select.wx ...

  5. select下拉框小DemoA

    <html> <head> <meta charset="utf-8"> <script src="jquery-1.9.1.m ...

  6. iview select下拉框的蜜汁小坑

    前言 最近使用iview的select下拉选择器,遇到一个很神奇的问题:选中下拉框里面的一个值,但是再去点下拉框的时候就只剩刚才选中的数据了.感觉应该是插件把刚才选中的数据当做的搜索条件,所以需要做的 ...

  7. angularJS select下拉框检测改变

    html:(已引入amazeUI) <div style="width:70px;display:inline-block;"> <form class=&quo ...

  8. table样式的下拉框（angularjs）

    前言 虽然使用的技术比较老了,但是思想却还是适用于现在的vue等框架. 一:实现的样式 二:实现包括的功能点 1:下拉框内容是表格,类似于一个弹窗 表格内容最多六行,超出的显示滚动条,表头固定,可滚动 ...

  9. angularjs select下拉搜索框

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 走进JDK(九)------AbstractMap

    map其实就是键值对,要想学习好map,得先从AbstractMap开始. 一.类定义.构造函数.成员变量 public abstract class AbstractMap<K,V> i ...

  2. (22)Embrace the near win

    https://www.ted.com/talks/sarah_lewis_embrace_the_near_win/transcript?referrer=playlist-talks_to_get ...

  3. docker-compose搭建mongoDB副本集（1主+1副+1仲裁）

    一.基本概念 1.副本集:一个副本集就是一组MongoDB实例组成的集群,由一个主(Primary)服务器和多个备份(Secondary)服务器构成 2.主节点(master):主节点接收所有写入操作 ...

  4. 【慕课网实战】一、以慕课网日志分析为例 进入大数据 Spark SQL 的世界

    课程整套CDH相关的软件下载地址:http://archive.cloudera.com/cdh5/cdh/5/ cdh-5.7.0 生产或者测试环境选择对应CDH版本时,一定要采用尾号是一样的版本 ...

  5. MVC笔记之一：MVC编程模型

    MVC是ASPX.NET用于构造Web应用的一种框架,和传统的ASPX.NET开发模式(Web Form)在架构上相同,同样采用三层框架实现,但相比传输开的模式,各层架构更加规范. 传统三层架构: V ...

  6. Django(序列化、SweetAlert插件)

    day72 参考:https://www.cnblogs.com/liwenzhou/p/8718861.html#autoid-6-1-2 前端序列化 后端序列化 day73中 补充一个SweetA ...

  7. Swift 里 Dictionary

    Dictionary uses two storage schemes: native storage and Cocoa storage. 只看 native storage 的,也就是和 OC 无 ...

  8. Python又把GUI界面攻下了，今天就告诉你怎么玩

    0.引言 学Python这么久了,一直想做个界面出来,最近发现Python有个内置库tkinter,利用它可以很轻松做出一些简易的UI界面,首先来看Python官方对Tkinter的说明: The t ...

  9. Python函数学习——初步认识

    函数使用背景 假设老板让你写一个监控程序,24小时全年无休的监控你们公司网站服务器的系统状况, 当cpu＼memory＼disk等指标的使用量超过阀值时即发邮件报警, 你掏空了所有的知识量,写出了以下 ...

  10. 【Redis面试题】Redis的字符串是怎么实现的？

    年前本人在找工作面试时在Redis相关问题上可栽了跟头.在面试前按常规套路准备了一下,比如 Redis 的常用5种数据结构,Redis持久化策略,Redis实现分布式锁,简单发布订阅等等都准备了,当时 ...