angularjs小练习(分别通过ng-repeat和ng-option动态生成select下拉框)
本次做一个简单的关于动态生成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下拉框)的更多相关文章
- 将select的默认小三角替换成别的图片,且实现点击图片出现下拉框选择option
最近做项目,要求修改select下拉框的默认三角样式,因为它在不同浏览器的样式不同且有点丑,找找网上也没什么详细修改方法,我就总结一下自己的吧. 目标是做成下图效果: 图一:将默认小三角换成红圈的三角 ...
- 【经验】angularjs 实现带查找筛选功能的select下拉框
一.背景 对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!so,为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有 ...
- 微信小程序手动实现select下拉框选择
在小程序中没有像h5中的下拉 标签的 picker又满足部了,那就自己动手写 <view class='list-msg'> <view class='list-msg1'> ...
- 微信小程序 select 下拉框组件
一.源码地址 https://github.com/imxiaoer/WeChatMiniSelect 二.效果图 录屏图片质量较差,所以大家会看到残影(捂脸) 三.组件源码 1. select.wx ...
- select下拉框小DemoA
<html> <head> <meta charset="utf-8"> <script src="jquery-1.9.1.m ...
- iview select下拉框的蜜汁小坑
前言 最近使用iview的select下拉选择器,遇到一个很神奇的问题:选中下拉框里面的一个值,但是再去点下拉框的时候就只剩刚才选中的数据了.感觉应该是插件把刚才选中的数据当做的搜索条件,所以需要做的 ...
- angularJS select下拉框检测改变
html:(已引入amazeUI) <div style="width:70px;display:inline-block;"> <form class=&quo ...
- table样式的下拉框(angularjs)
前言 虽然使用的技术比较老了,但是思想却还是适用于现在的vue等框架. 一:实现的样式 二:实现包括的功能点 1:下拉框内容是表格,类似于一个弹窗 表格内容最多六行,超出的显示滚动条,表头固定,可滚动 ...
- angularjs select下拉搜索框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- python class中__init__函数、self
class中包含类内变量以及方法 __init__方法 其前面带有”__“,故此函数被声明为私有方法,不可类外调用. 此方法可以带参数初始化 此方法的首参数必须是”self“(不过”self“也可以换 ...
- Maths | 二次型求偏导
- Beta阶段Scrum 冲刺博客合集
Beta阶段博客链接集合 第一篇Scrum冲刺博客 第二篇Scrum冲刺博客-Day1 第三篇Scrum冲刺博客-Day2 第四篇Scrum冲刺博客-Day3 第五篇Scrum冲刺博客-Day4 第六 ...
- 20155326刘美岑《网络对抗》Exp5 MSF基础应用
基础问题回答 解释exploit,payload,encode是什么: exploit:就是一个简单的攻击指令,在配置完成之后下发攻击命令. payload:是攻击载荷,是我们在攻击过程中真正用到的部 ...
- Beta冲刺 (5/7)
Part.1 开篇 队名:彳艮彳亍团队 组长博客:戳我进入 作业博客:班级博客本次作业的链接 Part.2 成员汇报 组员1(组长)柯奇豪 过去两天完成了哪些任务 共享编辑文章的后端数据处理 部分代码 ...
- 循环队列 & 栈的共用空间
循环队列 非常好的数据结构,充分利用率空间,可以用于网络端存储socket消息! /*************************************** 作者: 未闻花语 版本: v1.0 ...
- Latex一次添加两个图(并列),半栏
\begin{figure}[t] \centering \includegraphics[width=0.9\columnwidth, clip=true, trim=0 0 0 32]{figur ...
- ZZ:git只clone仓库中指定子目录和指定文件的实现
原文链接: http://blog.csdn.net/xuyaqun/article/details/49275477 git目前唯一不能实现的是:不能像svn那样,针对子目录设置权限,这与git分布 ...
- 2018.09.22 上海大学技术分享 - An Introduction To Go Programming Language
老实说笔者学习 Go 的时间并不长,积淀也不深厚,这次因缘巧合,同组的同事以前是上海大学的开源社区推动者之一,同时我们也抱着部分宣传公司和技术分享的意图,更进一步的,也是对所学做一个总结,所以拟定了这 ...
- 使用 PLSQL 提示动态执行表不可访问,本会话的自动统计被禁止
使用PLSQL,第一次执行表的select操作的时候,提示"动态执行表不可访问,本会话的自动统计被禁止",如上图: 这种问题,一看就是当前连接用户没有对sys用户下的表v$sess ...