1、使用option

<select class="form-control" ng-model="searchType">
<option value="1" ng-selected="searchType=='1'">全部</option>
<option value="2">有推荐答案</option> // value=1,把1写成数字形式,在浏览器中还是会变成字符串显示
<option value="3">无推荐答案</option>
</select>
<script>
  .controller('myCtrl',function($scope){
    $scope.searchType=1;
  })
</script>

在angular中写如上select,第一次会出现空行,选中一个选项后,空行就消失了。

要使得一开始就没有空行需要将controller中的赋值变成字符串形式, $scope.searchType="1",这样就没有空行了。

2、使用ng-option

<select ng-options="item for item in value" ng-model="searchType"></select>
<script>
.controller('myCtrl',function($scope){
$scope.value=['全部','有推荐答案','无推荐答案'];
})
</script>

这样子是没有表示我要选择哪一项的,如果你不是强制要选择一项,可以在select中添加<option value="">请选择</option>

如果是强制要选择一项的,可以将$scope.searchType='全部',初始化searchType就可以避免空行了

angular select框 option空行的更多相关文章

  1. select 框option添加属性 js计算价格 保持两位小数

    <select name="" id=""> <volist name="v['childList']" id=" ...

  2. 将option添加到select框

    var select=document.createElement("select"); select.setAttribute("class","f ...

  3. JavaScript获取Select下拉框Option的Value和Text值的方法

    Js获取select下拉列表框各个Option的Value值相对比较容易,不过获取Text值却有点麻烦,对于一个初学JavaScript的 新手来说,可能一时还无从下手,那么就请看下本文的方法,以一个 ...

  4. jquery操作select下拉框的各种方法,获取选中项的值或文本,根据指定的值或文本选中select的option项等

    简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...

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

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

  6. 关于java 获取 html select标签 下拉框 option 文本内容 隐藏域

    在HTML中从多选下拉框中提取已选中选项的文本内容到后台,被这个问题难倒了. demo.jsp文件 <select id="selecttype" name"typ ...

  7. select下拉框option的样式修改

    select原样式: 进行样式修改后的样式: 附上修改代码: //select外面必须包裹一个div,用来覆盖select原有的样式<div class="option"&g ...

  8. [Angular 2] ng-model and ng-for with Select and Option elements

    You can use Select and Option elements in combination with ng-for and ng-model to create mini-forms ...

  9. AngularJS下拉列表select在option动态变化之后多出了一个错误项的问题

    场景: Select初始化之后,选中select的某个选项 通过AngularJS更新select的选项 错误写法: HTML(使用ng-repeat) <div ng-app="Te ...

随机推荐

  1. day36 04-Hibernate检索方式:多表连接查询

    返回的是一个List集合,这个List集合的泛型是一个Object数组.最后会拿到一个里面放Object数组的List集合. HQL内连接查询,发出SQL语句查询出来的结果集被Hibernate封装成 ...

  2. NOIP模拟 6.28

    NOIP模拟赛6.28 Problem 1 高级打字机(type.cpp/c/pas) [题目描述] 早苗入手了最新的高级打字机.最新款自然有着与以往不同的功能,那就是它具备撤销功能,厉害吧. 请为这 ...

  3. hdu 2444 The Accomodation of Students(二分匹配 匈牙利算法 邻接表实现)

    The Accomodation of Students Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ( ...

  4. GitHub的注册与使用

    1. 注册账号: 地址: https://github.com/输入账号.邮箱.密码,然后点击注册按钮. 2. 初始设置 注册完成后,选择Free免费账号完成设置 3.验证账号 新建一个仓库 发现邮箱 ...

  5. ecshop二次开发之后台秒杀

    1.进入admin->includes->inc_menu.PHP中此文件为定义左侧功能模块超链接 2.添加include/inc_menu.php秒杀管理超链接找链接 $modules[ ...

  6. 为什么DW的可视化下看到的效果与浏览器的效果有所区别?

    可视区不是调用外面浏览器,Dreamweav 可视化区是为用户编辑而设计. 支持最基本的 HTML 与 CSS ,对 CSS 而言,我写入样式时如果你使用最基本的样式时它显示与你浏览器中看的效果相差不 ...

  7. NOIP模拟 7.05

    Problem 1 双色球(ball.cpp/c/pas) [题目描述] 机房来了新一届的学弟学妹,邪恶的chenzeyu97发现一位学弟与他同名,于是他当起了善良的学长233 “来来来,学弟,我考你 ...

  8. FastAdmin 自学教程 - 目录(持续更新)(2019-10-11)

    FastAdmin 自学教程 - 目录 本自学教程将不定期更新. 了解 FastAdmin FastAdmin 开发第 1 天:了解 FastAdmin 框架 FastAdmin 开发第 2 天:安装 ...

  9. mysql操作手册2

          6 rows in set (0.00 sec) # 我们再把 table 的位置交换一下,再用 right join 试试 select a.id,a.name,b.dept_id fr ...

  10. 微信小程序组件——详解wx:if elif else的用法

    背景 在学习微信小程序开发wxml页面时,需要使用if,else来判断组件是否进行展示,代码如下 <view wx:if="{{is_login==1}}">成功登录& ...