草庐IT

javascript - 按字母顺序停止 AngularJS ng-repeat 渲染

coder 2024-07-28 原文

在我的 Angular 应用程序中，我试图在表格中显示 JSON 数据。数据如下所示:

$scope.data = 
  {
    "EVENT NAME":"Free Event",
    "ORDER ID":311575707,
    "DATE":"6/26/14",
    "GROSS REVENUE (USD)":"0",
    "TICKET REVENUE (USD)":"0",
    "EVENTBRITE FEES (USD)":"0",
    "CC PROCESSING (USD)":"0",
    "TICKETS":1,
    "TYPE":"Free Order",
    "STATUS":"Free Order",
    "TRANSACTION ID":"",
    "NOTES":"",
    "FIRST NAME":"Khee Seng",
    "LAST NAME":"Chua",
    "EMAIL ADDRESS":"email@anemailadderss.com"
  };

我是这样显示的:

   <table class="table table-striped selector">
      <tbody>
        <tr>
          <td ng-repeat="(key, value) in data">
            <strong>{{key}}</strong>
          </td>
        </tr>
        <tr>
          <td ng-repeat="(key, value) in data">
                    {{value}}
                </td>
        </tr>
      </tbody>
    </table>

在我看来，这应该遍历对象中的每个 `(key, value) 对并按顺序显示它。但是，AngularJS 按字母顺序显示值。

这是一个复制此问题的 plunkr:http://plnkr.co/edit/V3Y2ZuwV1v9Pzsl0jGhA?p=preview

我如何调整代码，使其以对象实际出现的自然顺序显示？

最佳答案

你可以这样实现

Working Demo

在范围内定义一个方法，如图所示

$scope.notSorted = function(obj){
    if (!obj) {
        return [];
    }
    return Object.keys(obj);
}

在 html 中如下所示

html

<table class="table table-striped selector">
  <tbody>
    <tr>
      <th ng-repeat="key in notSorted(data)">
         {{key}}
      </th>
    </tr>
    <tr>
      <td ng-repeat="key in notSorted(data)" ng-init="value = data[key]">
            {{value}}
         </td>
    </tr>
  </tbody>
</table>

原创文章: ng-repeat with no sort? How?

关于javascript - 按字母顺序停止 AngularJS ng-repeat 渲染，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24656912/

javascriptAngularJS34strongltangularjs-ng-repeat

有关javascript - 按字母顺序停止 AngularJS ng-repeat 渲染的更多相关文章

  1. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  2. ruby-on-rails - 使用一系列等级计算字母等级 - 2

    这里是Ruby新手。完成一些练习后碰壁了。练习:计算一系列成绩的字母等级创建一个方法get_grade来接受测试分数数组。数组中的每个分数应介于0和100之间，其中100是最大分数。计算平均分并将字母等级作为字符串返回，即“A”、“B”、“C”、“D”、“E”或“F”。我一直返回错误:avg.rb:1:syntaxerror,unexpectedtLBRACK,expecting')'defget_grade([100,90,80])^avg.rb:1:syntaxerror,unexpected')',expecting$end这是我目前所拥有的。我想坚持使用下面的方法或.join，

  3. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  4. ruby - Chef 执行非顺序配方 - 2

    我遵循了教程http://gettingstartedwithchef.com/,第1章。我的运行list是"run_list":["recipe[apt]","recipe[phpap]"]我的phpapRecipe默认Recipeinclude_recipe"apache2"include_recipe"build-essential"include_recipe"openssl"include_recipe"mysql::client"include_recipe"mysql::server"include_recipe"php"include_recipe"php::modul

  5. ruby - 匹配大写字母并用后续字母填充，直到一定的字符串长度 - 2

    我有一个驼峰式字符串，例如:JustAString。我想按照以下规则形成长度为4的字符串:抓取所有大写字母；如果超过4个大写字母，只保留前4个；如果少于4个大写字母，则将最后大写字母后的字母大写并添加字母，直到长度变为4。以下是可能发生的3种情况:ThisIsMyString将产生TIMS(大写字母)；ThisIsOneVeryLongString将产生TIOV(前4个大写字母)；MyString将生成MSTR(大写字母+tr大写)。我设法用这个片段解决了前两种情况:str.scan(/[A-Z]/).first(4).join但是，我不太确定如何最好地修改上面的代码片段以处理最后一种

  6. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD

  7. ruby - 正则表达式将非英文字母匹配为非单词字符 - 2

    @raw_array[i]=~/[\W]/非常简单的正则表达式。当我用一些非拉丁字母(具体来说是俄语)尝试时，条件是错误的。我能用它做什么？ 最佳答案 @raw_array[i]=~/[\p{L}]/使用西里尔字符进行测试。引用:http://www.regular-expressions.info/unicode.html#prop 关于ruby-正则表达式将非英文字母匹配为非单词字符，我们在StackOverflow上找到一个类似的问题： https://

  8. ruby-on-rails - 在 RSpec 中，如何以任意顺序期望具有不同参数的多条消息？ - 2

    RSpec似乎按顺序匹配方法接收的消息。我不确定如何使以下代码工作:allow(a).toreceive(:f)expect(a).toreceive(:f).with(2)a.f(1)a.f(2)a.f(3)我问的原因是a.f的一些调用是由我的代码的上层控制的，所以我不能对这些方法调用添加期望。 最佳答案 RSpecspy是测试这种情况的一种方式。要监视一个方法，用allowstub，除了方法名称之外没有任何约束，调用该方法，然后expect确切的方法调用。例如:allow(a).toreceive(:f)a.f(2)a.f(1)

  9. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  10. ruby-on-rails - 我如何告诉 Rails 如何正确地大写首字母缩写词？ - 2

    我的一个模型中有一个名为sui的字段。它代表“标准用户标识符”。当该字段出现验证错误时，Rails会打印“Suiisrequired”或“Suiisalreadytaken”。如何告诉Rails'sui'.titleize是“SUI”？我查看了Inflector.human，但这并不完全正确。 最佳答案 在这种情况下，我使用custom_err_msg插入。安装后，您可以提供如下自定义错误消息:validates_presence_of:sui,:message=>'^SUIisrequired'当您将^放在开头时，Rails不会输

随机推荐