【问题标题】:AngularJS, Ng-repeat changes / alters the order of a Json arrayAngularJS,Ng-repeat 改变/改变 Json 数组的顺序
【发布时间】:2014-03-18 05:01:17
【问题描述】:

SO 的朋友们:

2014 年 3 月 18 日。我正在处理一种情况,在使用 ng-repeat 时,数组中的元素(我从 Json 字符串中获取)改变了原始顺序。

需要明确的是,数组中的第一个变量与order_id和人名相关,而最后一个变量与信用信息相关。

我的信息顺序完全混乱,可能是字母顺序,我不确定。

代码中没有奇怪的东西:

<li ng-repeat="(variable, valor) in records" >
     <a href="">{{variable}}: </a>
     <a href="">{{valor}}</a>
</li>

有参考吗?

提前致谢! 克里斯;

【问题讨论】:

    标签: javascript json angularjs angularjs-ng-repeat


    【解决方案1】:

    克里斯:键的排序是按字母顺序排列的,这在最近的 Angular 1.4 版本中得到了修复。正如下面的官方 Angular 文档中所述:

    1.4 版删除了字母排序。我们现在依赖订单 运行时浏览器返回for key in myObj

    https://docs.angularjs.org/api/ng/directive/ngRepeat

    【讨论】:

      【解决方案2】:

      您可以使用orderBy 过滤器来执行此操作。下面我举个例子;

      假设你有一个这样的控制器:

      function Ctrl($scope) {
        $scope.friends =
            [{name:'John', phone:'555-1212', age:19},
             {name:'Mary', phone:'555-9876', age:10},
             {name:'Mike', phone:'555-4321', age:21},
             {name:'Adam', phone:'555-5678', age:35},
             {name:'Julie', phone:'555-8765', age:29}]
        $scope.predicate = '-age';
      }
      

      在 HTML 中:

        <div ng-controller="Ctrl">
          <table class="friend">
            <tr>
              <th>Name
      
              <th>Phone Number</th>
              <th>Age</th>
            </tr>
            <tr ng-repeat="friend in friends | orderBy:predicate">
              <td>{{friend.name}}</td>
              <td>{{friend.phone}}</td>
              <td>{{friend.age}}</td>
            </tr>
          </table>
        </div>
      

      结果会是这样的:

      Name    Phone Number    Age
      Adam    555-5678        35
      Julie   555-8765        29
      Mike    555-4321        21
      John    555-1212        19
      Mary    555-9876        10
      

      我认为这样的事情会解决你的问题。

      如果你想根据年龄升序排序,只需在控制器中更改此行

      $scope.predicate = '+age';
      

      【讨论】:

      • 兄弟,我不确定这是否可行,因为这个值甚至没有 id。他们有一个来自数据库的通用订单......谢谢!
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-11-09
      • 1970-01-01
      相关资源
      最近更新 更多