本次做一个简单的关于动态生成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. ABP框架系列之二十六：(EventBus-Domain-Events-领域事件)

    In C#, a class can define own events and other classes can register it to be notified when something ...

  2. 10. Halloween 万圣节

    10. Halloween 万圣节 (1) On October the 31st,across Britain and the USA,thousands of children are dress ...

  3. Java面试题5

    4.&和&&的区别 答: &是位运算符,表示按位与运算,&&是逻辑运算符,表示逻辑与(and) 5.Collection 和 Collections的区 ...

  4. jmeter+Jenkins持续集成（邮件通知）

    jmeter构建后,自送发送邮件到指定的邮箱,配置如下 1)Jenkins Location配置 jenkins首页->系统管理->系统配置页面 其中Jenkins URL有默认值,最好修 ...

  5. 关于UIScrollView不能响应UITouch事件的解决办法

    原因是:UIView的touch事件被UIScrollView捕获了. 解决办法:让UIScrollView将事件传递过去.于是最简单的解决办法就是加一个UIScrollView的category.这 ...

  6. CASUAL_NCT

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Da ...

  7. [UWP]使用Popup构建UWP Picker

    在上一篇博文<[UWP]不那么好用的ContentDialog>中我们讲到了ContentDialog在复杂场景下使用的几个令人头疼的弊端.那么,就让我们在这篇博文里开始愉快的造轮子之旅吧 ...

  8. Django 通过 mongoengine 连接 MongoDB 进而使用orm进行CRUD

    一. 在python脚本中, 我们通常可以使用pymongo模块实现与mongodb数据库的交互, 但是在使用Django框架进行定制开发的web server 项目中, 仍然使用pymongo模块的 ...

  9. Javascript百学不厌 - this

    最近看了一本书,让自己的野路子走走正规路线 方法调用模式: 方法:当一个函数被保存为对象的一个属性时,我们称它为一个方法. var obj = { fun1: function() {this} // ...

  10. spring框架学习笔记7：事务管理及案例

    Spring提供了一套管理项目中的事务的机制 以前写过一篇简单的介绍事务的随笔:http://www.cnblogs.com/xuyiqing/p/8430214.html 还有一篇Hibernate ...