Javascript 选择框上的AngularJS orderBy无法按预期工作。

我正在尝试将一个旧的PHP/JS项目转换为纯AngularJS

我遇到的问题是，我的选择框上的orderBy:name只是在某种程度上起作用

例如，在下面的plunker中，如果打开“建筑”下拉列表，它似乎按正确的字母顺序排列。然而，在整个下拉列表中，有一些只是随机放错了位置

另一件奇怪的事情是，JSON文件已经按字母顺序排列了，所以我不确定该怎么处理

我是AngularJS的新手，所以我知道我错过了一些小东西。任何帮助都将不胜感激。谢谢

普朗克：

JSON示例：

{
    "id": 110,
    "name": "Administration Center",
    "address": null,
    "latitude": "41.256326",
    "longitude": "-95.973784",
    "content": "",
    "overlay": "g|xzFnywhQ?^^??j@M??^r@??_@K??kA",
    "url": "",
    "type_id": 3,
    "show_marker": 0,
    "show_label": 1,
    "custom_marker": "",
    "created_at": "2013-07-10 15:40:09",
    "updated_at": "2013-07-10 15:42:50",
    "color": "#08c"
}

---

您的plunker在依赖项的顺序上有一些错误，例如：angular之后的jquery等。在开发控制台中有一条错误消息。使用angular和jquery时，必须首先包含jquery

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/underscorejs/1.5.1/underscore-min.js"></script>

js

---

您的plunker在依赖项的顺序上有一些错误，例如：angular之后的jquery等。在开发控制台中有一条错误消息。使用angular和jquery时，必须首先包含jquery

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/underscorejs/1.5.1/underscore-min.js"></script>

js

在我看来，除了值编辑之外，ng select不喜欢订购任何东西：看起来这并不完全正确。因此，我在控制器中使用下划线进行了一些排序，并进行了更明确的选择：

 <div ng-repeat="menu in orderedMenus | orderBy:'name'"><!-- orderBy might not be necessary here --> 
  <h1>{{typeIds[menu.key]}}</h1>
  <select ng-model="selectedlocation">
   <option ng-repeat="item in  menu" value="item.id">
    {{item.name}}
   </option>
  </select>     
 </div>

这才是关键

在我看来，除了值编辑之外，ng select不喜欢订购任何东西：看起来这并不完全正确。因此，我在控制器中使用下划线进行了一些排序，并进行了更明确的选择：

 <div ng-repeat="menu in orderedMenus | orderBy:'name'"><!-- orderBy might not be necessary here --> 
  <h1>{{typeIds[menu.key]}}</h1>
  <select ng-model="selectedlocation">
   <option ng-repeat="item in  menu" value="item.id">
    {{item.name}}
   </option>
  </select>     
 </div>

---

这才是关键

现在这里似乎发布了一个更好的解决方案。但是，为了让您了解这些情况下的选项，您可以编写自己的排序，因为orderBy可以使用排序函数，例如：

  <select ng-model="selectedlocation" ng-options="value.id as value.name for (key,value) in menu.data | orderBy:sortFunction"></select>  

您将看到您获得了项目名称。如果按此方法执行，则您的任务是从sortFunction返回一个值，当对运算符求值时，该值将生成您想要的任何排序

我不是推荐这条路线，只是为了完整起见提一下

---

看来现在这里发布了一个更好的解决方案。但是，为了让您了解这些情况下的选项，您可以编写自己的排序，因为orderBy可以使用排序函数，例如：

  <select ng-model="selectedlocation" ng-options="value.id as value.name for (key,value) in menu.data | orderBy:sortFunction"></select>  

您将看到您获得了项目名称。如果按此方法执行，则您的任务是从sortFunction返回一个值，当对运算符求值时，该值将生成您想要的任何排序

我不是推荐这条路线，只是为了完整起见提一下

---

第一次尝试的好帖子。我相信这会很快得到回答。这是你第一次尝试的好帖子。我相信这个问题会很快得到回答。你必须首先包括jquery——angular有一个jquery的小版本，所以为什么要使用jquery呢？我不知道他是如何在自己的项目中使用jquery的，但他试图包括它，所以我这么说。无论何时，jquery都必须位于angular之前，以便angular可以使用它。Jquery有一些简洁的函数，可以在大型项目中使用。这太棒了。非常感谢你的帮助。我快要发疯了。jquery存在的唯一原因是引导依赖性，尽管我并没有真正使用它。默认情况下，您将无法使用带有angular的引导组件中的JavaScript。人们所做的是，他们只包含引导css和引导ui指令，用于为angular重写的引导映射。在谷歌上找吧！它可能仍然需要jquery。很抱歉输入错误，我当时在手机上。默认情况下，您将无法使用带有angular的引导组件中的JavaScript。人们所做的是，他们只包含引导css，并使用angular ui，该ui包含用angular编写的指令来替换bootsrap组件。它可能仍然需要jquery。您必须首先包含jquery-angular已经盗用了jquery的一个小版本，那么为什么要使用jquery呢？我不知道他是如何在自己的项目中使用jquery的，但他试图包含它，所以我这么说。无论何时，jquery都必须位于angular之前，以便angular可以使用它。Jquery有一些简洁的函数，可以在大型项目中使用。这太棒了。非常感谢你的帮助。我快要发疯了。jquery存在的唯一原因是引导依赖性，尽管我并没有真正使用它。默认情况下，您将无法使用带有angular的引导组件中的JavaScript。人们所做的是，他们只包含引导css和引导ui指令，用于为angular重写的引导映射。在谷歌上找吧！它可能仍然需要jquery。很抱歉输入错误，我当时在手机上。默认情况下，您将无法使用带有angular的引导组件中的JavaScript。人们所做的是，他们只包括引导css，并使用angular ui，该ui包含用angular编写的指令，以重新启动

---

放置bootsrap组件。它可能仍然需要jquery。很高兴知道。谢谢@KayakDaveGood知道。谢谢@KayakDaveFrankly jpmorin在这里有更好的答案-他实际上解决了问题，我解决了它。坦率地说，jpmorin在这里有更好的答案-他实际上解决了问题，我解决了它。