1.问题说明:

option ng-repeat多空白项

2.解决方案:

html:

  1. <ion-view hide-nav-bar="true">
  2. <ion-content>
  3. <div class="list card">
  4. <div>
  5. <label class="item item-input item-select">
  6. <div class="input-label">
  7. <span>安排类型</span>
  8. </div>
  9. <select
  10. ng-change="selectAction()"
  11. ng-model="selectedType.value"
  12. ng-init="selectedType.value = ''"
  13. >
  14. <option value="">-- 请选择 --</option>
  15. <option
  16. ng-repeat="item in workArrangeTypes"
  17. value="{{item.value}}"
  18. >{{item.name}}</option>
  19. </select>
  20. </label>
  21. </div>
  22. <div class="item">
  23. <button style="width: 100%;" class="button button-positive" ng-click="submitWork()">提交安排工作</button>
  24. </div>
  25. </div>
  26. </ion-content>
  27. </ion-view>

js:

  1. /************************************** 区域管理 *************************************/
  2. .controller('RegionalManageCtrl', ['$scope',function($scope) {
  3. /*** 测试 ***/
  4. $scope.selectedType = {value: 1}; // 默认值
  5. $scope.workArrangeTypes = [
  6. {name: '社区服务', value: 1},
  7. {name: '教育学习', value: 2},
  8. {name: '思想汇报', value: 3},
  9. {name: '电话汇报', value: 4},
  10. {name: '家庭访问', value: 5}
  11. ]; // 工作安排类型
  12.  
  13. // 每次option改变时自动调用该方法
  14. $scope.selectAction = function() {
  15. console.log($scope.selectedType.value); // 5
  16. }
  17.  
  18. /**
  19. * 提交工作安排
  20. */
  21. $scope.submitWork = function() {
  22. console.log($scope.selectedType); // {value: 5}
  23. }
  24. }])

3.效果图

angularjs中下拉框select option默认值的更多相关文章

  1. jQuery中下拉框select的操作方法详解

    最近在写页面的时候常常遇到要动态增删改下拉框select的情况,由于我比较习惯用jquery框架来架构我的前端js,所以就顺便把各种jquery操作下拉框select的方法总结了一下,收藏起来以便下次 ...

  2. 如何在某些情况下禁止提交Select下拉框中的默认值或者第一个值(默认选中的就是第一个值啦……)

    群里有个帅哥问了这么个问题,他的下拉框刚进页面时是隐藏起来的,但是是有值的,为啥呢?因为下拉框默认选中了第一个值呗,,, 所以提交数据的时候就尴尬啦,明明没有选,但是还是有值滴.怎么办呢? 一开始看到 ...

  3. 帝国cms中下拉框select的绑定

    在修改数据模型中,将下拉框的表示代码换成下: 将id换成自己的id地址.数据库查询中的classid换成自己创建栏目的id. <select name="diqu" id=& ...

  4. c# wpf ComboBox 动态下拉框 及 动态默认值设定

    1.下拉框声明 <ComboBox x:Name="DirComboBox" Width="150" Height="18" Marg ...

  5. 【jQuery获取下拉框select、单选框radio、input普通框的值和checkbox选中的个数】

    radio单选框:name属性相同 <input type="radio" id="sp_type" name="p_type" va ...

  6. struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input

    原文地址:struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input jsp页面 1     function dosearch() {2         if ($(&q ...

  7. AngularJS的select设置默认值

    AngularJS的select设置默认值 在使用Angular时候使用select标签时会遇到绑定数据指定默认显示值可这样实现 <!DOCTYPE html> <html ng-a ...

  8. 下拉框select中option居中样式

    下拉框select中option居中样式 text-align:center;text-align-last:center;

  9. JS模拟下拉框select

    最近做的一个项目有下拉框 同事都是用的是美化控件,但是用美化控件当然是好 但是网上找的一个控件不知道扩展性怎么样?对以后的维护会不会造成有影响?比如我想增加一个功能或者减少一个功能会不会影响?还有就是 ...

随机推荐

  1. python中os模块讲解

    本文主要介绍一些os模块常用的方法: 先看下我的文件目录结构 D:\LearnTool\pycode\part1 在此目录下的文件如下: abcd.py demo1.1.py demo1.2.py z ...

  2. 深入浅出Oracle:DBA入门、进阶与诊断案例(读书笔记1)

    一.数据库的启动和关闭 Oracle Server共有2部分组成:Instance和Database. Instance是指一组后台进程/线程和一块共享内存区域,而Database是指存储在磁盘上的一 ...

  3. [转]Python 之 使用 PIL 库做图像处理

    Python 之 使用 PIL 库做图像处理 1. 简介. 图像处理是一门应用非常广的技术,而拥有非常丰富第三方扩展库的 Python 当然不会错过这一门盛宴.PIL (Python Imaging ...

  4. CentOS下,mysql服务启动失败

    mysql服务启动失败,可以使用排除法查找原因: 如果修改了my.cnf后重启mysql服务失败,大多数情况下都是配置文件有错误, 可以通过备份原来的配置文件,然后将配置文件清空,只剩下[mysqld ...

  5. EIGRP

    因为rip的收敛时间长  尤其是使用过程中   链路down掉    重收敛的时间比较长  所以在中到大型的园区网中很少用到rip协议 只有在很小的局域网中用到rip   因为收敛时间可能会稍微短一些 ...

  6. 【转】SQL索引一步到位

    原文:http://www.cnblogs.com/AK2012/archive/2013/01/04/2844283.html SQL索引一步到位(此文章为“数据库性能优化二:数据库表优化”附属文章 ...

  7. PTA 10-排序4 统计工龄 (20分)

    题目地址 https://pta.patest.cn/pta/test/15/exam/4/question/721 5-13 统计工龄   (20分) 给定公司NN名员工的工龄,要求按工龄增序输出每 ...

  8. 性能学习之--loaderunner中run-time setting常用功能

    先打开run-time setting界面 一.Run Logic   设置迭代次数,只控制action的迭代次数,init和end只执行一次. 如果迭代次数设置10,10个并发用户,那么init和e ...

  9. 【Luogu】P2258子矩阵(状态压缩,DP)

    233今天蒟蒻我连文化课都没听光想着这个了 然后我调了一下午终于过了!!! 一看数据范围似乎是状压,然而216等于65536.开一个65536*65536的二维数组似乎不太现实. 所以Rqy在四月还是 ...

  10. [kubernetes] 使用 Minikube 快速搭建本地 k8s 环境 (基于 Docker 驱动模式)

    一.实验环境 操作系统:Centos 7 x86_64 Docker:1.12.6 二.部署 k8s 步骤 2.1  安装 kubectl cat <<EOF > /etc/yum. ...