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>


  • 相关阅读:
    java调用oracle存储过程
    高富帅屌丝买房差异大 看看都该买什么房
    c#控制IE浏览器自动点击等事件WebBrowser,mshtml.IHTMLDocument2
    .net 实现微信公众平台的主动推送信息
    HTML+CSS面试知识点分享(一)
    JS面试知识点分享(一)
    HTML+CSS面试知识点分享(二)
    jQuery选择器学习理解
    PB程序系统错误处理记录
    sql server2000 直接读取excel2003文件的sheet
  • 原文地址:https://www.cnblogs.com/silyvin/p/9106836.html
Copyright © 2011-2022 走看看