Question

我正在使用Angularjs，我需要按字母顺序设置下拉列表。

这是ng-option：

 <div class="form-group">
  <label>Branch : <i class="mandate">*</i></label>
  <select class="form-control input-md" ng-model="query.branch" ng-options="showName(branch.branchName) as   showName(branch.branchName) for branch in baseBranches | orderBy:'toString()'" name="branchName">
    <option value="" selected>Select Branch</option>
  </select>
  <span class="error" ng-show="search_form.branchName.$error.required">Branch is required</span>
</div>

我是Angularjs的新手。

Answer 1

您可以在角度js中使用按过滤器排序。

<select class="form-control input-md" 
        ng-model="query.branch" 
        ng-options="showName(branch.branchName) as   showName(branch.branchName) for branch in baseBranches | orderBy:'branchName'" name="branchName">
    <option value="" selected>Select Branch</option>
</select>

如果您确定您的选项格式类似于此[number][space][word]，或者您需要依赖于空格后的单词排序，则可以为此编写自定义过滤器。我附上了一个带有自定义过滤器的示例代码段。

＆＃13;

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

<body>

    <div ng-app="myApp" ng-controller="myCtrl">

        <select ng-model="selectedName" ng-options="item.Name for item in names | customSorter:'Name'">
        </select>

    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.names = [{
                    "Id": 0,
                    "Name": "10095 Gil"
            }, {
                    "Id": 1,
                    "Name": "00085 Tobias"
            },
                {
                    "Id": 2,
                    "Name": "145 Linus"
            }];
        });
        app.filter('customSorter', function () {
            return function (items, field) {
                var filtered = [];
                angular.forEach(items, function (item) {
                    filtered.push(item);
                });
                filtered.sort(function (a, b) {
                    return (a.Name.split(' ')[1] > b.Name.split(' ')[1]);
                });

                return filtered;

            };
        });
    </script>

</body>

</html>

＆＃13;

＆＃13; 我添加了一个自定义过滤器，根据空格后的单词对数组进行排序，并根据需要对ng option进行排序。您可以找到ng-options here.

的详细信息

Answer 2

ng-repeat对我有用，请查看pen

   <div class="form-group">
       <label>Branch : <i class="mandate">*</i></label>
       <select >
         <option value="" selected>Select Branch</option>
         <option ng-repeat=" item in main.items | orderBy:'toString()'" value="      {{item}}">{{item}}</option>
       </select>

     </div>

Answer 3

试试这个

 <div class="form-group">
  <label>Branch : <i class="mandate">*</i></label>
  <select class="form-control input-md" ng-model="query.branch" ng-options="showName(branch.branchName) as   showName(branch.branchName) for branch in baseBranches | orderBy:'branchName'">
    <option value="" selected>Select Branch</option>
  </select>
  <span class="error" ng-show="search_form.branchName.$error.required">Branch is required</span>
</div>

如何在使用Angularjs的ng-options中使用字母顺序？

3 个答案: