douan5151 2014-10-17 10:33
浏览 58
已采纳

AngularJS - 下拉选择值与ng-repeat不在一起

I have a select drop down with the following data; (This is also the output to the console in Chrome).

{
    8: "Something", 
    9: "Something Again!", 
    10: "And again", 
    11: "And again!", 
    12: "etc...", 
    13: "etc etc...", 
}

The html and angular for the select drop down;

<select name="name" ng-model="choosen"> 
   <option value="">Please Select</select>
   <option ng-repeat="(key, value) in data" value="[[key]]">[[value]]</option>
</select>

The data is got from using the following query within Laravel (4.2) using the lists function;

Model::lists('name','id');

For some reason the data for the drop down gets reordered within my drop down to;

<select name="name" ng-model="choosen"> 
   <option value="">Please Select</select>
   <option value="10">And again</option>
   <option value="11">And again!</option>
   <option value="12">etc...</option>
   <option value="13">etc etc...</option>
   <option value="8">Something</option>
   <option value="9">Something Again!</option>
</select>

How do i make the output from the ng-repeat run through the order of the data in the correct numerical order?

Like so;

<select name="name" ng-model="choosen"> 
   <option value="">Please Select</select>
   <option value="8">Something</option>
   <option value="9">Something Again!</option>
   <option value="10">And again</option>
   <option value="11">And again!</option>
   <option value="12">etc...</option>
   <option value="13">etc etc...</option>
</select>

Plunkr is here

  • 写回答

1条回答 默认 最新

  • dsozqcx9668 2014-10-17 13:00
    关注

    Seems that ngRepeat order the data by the $$hash, probably the workaround is to use a function that list the keys and then iterate over them:

     $scope.keys = function(obj){
      return obj? Object.keys(obj) : [];
     }
    

    http://plnkr.co/edit/S8BiSPy9axQobSZVwk3D?p=preview

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 fluent的在模拟压强时使用希望得到一些建议
  • ¥15 STM32驱动继电器
  • ¥15 Windows server update services
  • ¥15 关于#c语言#的问题:我现在在做一个墨水屏设计,2.9英寸的小屏怎么换4.2英寸大屏
  • ¥15 模糊pid与pid仿真结果几乎一样
  • ¥15 java的GUI的运用
  • ¥15 Web.config连不上数据库
  • ¥15 我想付费需要AKM公司DSP开发资料及相关开发。
  • ¥15 怎么配置广告联盟瀑布流
  • ¥15 Rstudio 保存代码闪退