zoukankan      html  css  js  c++  java
  • angular使用select时要注意的坑

    一、错误使用产生的坑--留白

      公司前段时间要搞一个后台系统,为了快选了angular,在使用select标签的时候碰到一个小问题,首先我们先来看坑图,如图1所示。

          

      如图所示,出现了留白,也就是当我们使用select和ng-repeat循环时候出现了一个留白,如代码所示

     <select name="rzstatus" ng-model="rzstatus">
         <option ng-repeat=“a in aa” value="a">{{a.name}}</option>
     </select>

      

      出现这个问题的原因是指令使用错误,因为在使用select标签的时候应该是在select标签中直接使用ng-options指令而不再是option标签中使用ng-repeat指令了,代码如下所示

    <select id="type" ng-model="formData.type" ng-options="item.id as item.name for item in typeData">
    </select>
    

      

      如此写代码,就会出现如图2所示的界面,完美的避开了留白一行。

      

      ng-options新鲜的指令,下面我们来看下他的语法item.id as item.name for item in items。拿这句当案例,从后往前出现了三个关键字分别是in、for和as,in大家很熟悉从一个数组中依次遍历每一项的标识符,而for指代的是html5中option标签中的值,as 标签的意思是option标签中的value所对应的值,若有如下代码:

    item.id as item.name for item in items
    

     

      其实他等价于

    <option value="item.id">item.name</option>
    

      如上对应关系我相信大家就秒懂了,在做后台系统的时候如想让当前选项和服务端保持一致,如编辑文章时文章的属性,可见我们只需要对应as前面的item.as属性即可,如果我们要在每种选项前面多加一个“请选择”的选项,这时候只需要单独添加一个option标签行就成,如下代码所示:

    <select id="type" ng-model="type" ng-options="item.id as item.name for item in items">
      <option value=“-1”>请选择</option>
    </select>
    

      

  • 相关阅读:
    源码安装extundelete以及对遇到问题的解决
    centos 连不上网
    memcache 永久数据被踢
    svn 分支
    HTML5 中已经可以用 Ajax 上传文件了,而且代码非常简单,借助 FormData 类即可发送文件数据。
    sublime安装DocBlockr注释插件
    rsync 无密码 传输
    滚动条滑到底部,加载更多
    svn 同步脚本
    蒲公英[分块]
  • 原文地址:https://www.cnblogs.com/54td/p/6141352.html
Copyright © 2011-2022 走看看