美文网首页
angular:关于ng-repeat和ng-options

angular:关于ng-repeat和ng-options

作者: IceMao | 来源:发表于2016-08-26 17:20 被阅读0次

    二者都可用于实现下拉列表,并且度娘上有很多关于两者的内容,此处不再赘述,本文为了说明在最近的项目中遇到的相关问题,
    可以写成如下格式

    ng-repeat
    <select>
            <option value="x.id" ng-repeat="x in list" ng-bind="x.name">
            </option>
    </select>
    
    ng-options
    <select ng-options="x.id as x.name for x in list" ng-model="listId">
    </select>
    
    区别:
    1. 如上所示,当在select中时ng-repeat需要写在option中,而ng-options不需要option,会自动生成。
    2. ng-options 一定要和ng-model 搭配,ng-model获取的是列表的value值。
    3. 注意!!
      1).ng-options的value值得类型是number,当list.id是string类型时无法循环
      2).ng-repeat的value值类型是string,当list.id是number类型时无法循环
      可以根据id类型不同选择,这是在最近的项目中发现的问题,通过上述方法解决,如果有不同见解,欢迎留言。

    另:
    附上在解决过程中尝试的方法,可能重复,有问题仅做记录(以下简写,以下两种方法都是使用ng-repeat)

    【步骤】:列表list中id类型规定为number类型,首次实现页面下拉框时,使用的是ng-repeat,
    【结果】:下拉列表显示为空白
    【问题】:F12查看Elements,发现下拉列表中option如下显示

                <option value="? number:1 ?"></option>
    

    【解决1】 在js中将id装换为string 类型

                 list.id = list.id+"";
    

    【方法的问题】
    1.只是写了一句话,但是需要的地方很多,导致重复....
    2.改变了原类型

    【解决2】 朋友的思路,在js中写一个方法将id装换为string 类型,并在页面上使用这个方法,具体如下:
    .js:

                  $scope.toString = function(){
                      list.id.toString();
                  }
    

    .html

    <option value="{{toString(x.id)}}" ng-repeat="x in list" ng-bind="x.name"></option>
    

    【方法的问题】
    1.控制台会报错,错误没有深究,路过大神可以指路,如果以后知道了,我会进行补充_.

    相关文章

      网友评论

          本文标题:angular:关于ng-repeat和ng-options

          本文链接:https://www.haomeiwen.com/subject/ujrzsttx.html