zoukankan      html  css  js  c++  java
  • angularjs中下拉框select option默认值

    http://www.111cn.net/wy/js-ajax/101967.htm


    今天又被一个angularjs的一个问题给难住了,有花了比较多的时间去解决

    option ng-repeat多空白项


    <select class="form-control" ng-model="posts.website">
    <option value="0">请选择网站</option>
    <option ng-repeat="row in list.websites" value="{{row.websites_id}}" >{{row.websites_name}}</option>
    </select>
    请看上面的代码,ng-repeat在循环的时候发现了一个空白的选项,chrome解析出来代码是

    chrome解析错误代码


    <option value="? undefined:undefined ?"></option>

    然后查了list.websites对象的值貌似没有问题

    然后google一下,这里又要吐槽一下百度查不到结果
    发现要初始化posts.website的值,于是用ng-init初始一下值,把代码修改成

    <select class="form-control" ng-model="posts.website" ng-init="posts.website='0'">
    <option value="0">请选择网站</option>
    <option ng-repeat="row in list.websites" value="{{row.websites_id}}" >{{row.websites_name}}</option>
    </select>

    正常了,好坑啊

    这文章里讲了怎么解决添加页面的option多出来的问题

    在修改页面里我也是安装这个方法去处理,但是不行,给ng-model附上值就是显示不了默认值,最后在自己的摸索下解决了这个问题

    正确方面

    <select ng-model="posts.website" ng-options="c.websites_id as c.websites_name for c in posts.websites" class="form-control" ng-selected="c.websites_id==posts.website">
    <option value="">请选择网站</option>
    </select>

    游览器解析的代码为

    <select ng-model="posts.website" ng-options="c.websites_id as c.websites_name   for c in posts.websites" class="form-control ng-pristine ng-valid ng-touched" ng-selected="c.websites_id==posts.website">
    <option value="" class="" selected="selected">请选择网站</option>
    <option label="fdsaffd" value="number:4">fdsaffd</option>
    <option label="fdsaffdsa" value="number:3">fdsaffdsa</option>
    <option label="fdsaf" value="number:2">fdsaf</option>
    <option label="小松博客" value="number:1" selected="selected">小松博客</option>
    </select>


  • 相关阅读:
    同步linux服务器的时间
    Esper学习之四:Context
    Haproxy+Keepalived搭建Weblogic高可用负载均衡集群
    C++中的对象指针
    第十五周oj刷题——Problem M: C++习题 矩阵求和--重载运算符
    《人工智能教程(张仰森)》(二)
    JAVA 并发编程-线程池(七)
    新手学測试----Unit Test(单元測试)
    HDU2193-AVL-数据结构-AVL
    Visual Assist X破解版安装(vs2010助手)
  • 原文地址:https://www.cnblogs.com/silyvin/p/9106836.html
Copyright © 2011-2022 走看看