Question

我的代码设置为允许用户选择排序方向：

<tr data-ng-repeat="row in gdata | orderBy:inverse">

这是我的HTML：

<div class="orderby">
   <div class="arrow up"></div>
   <div class="arrow down"></div>
   <input type="checkbox" data-ng-model="inverse">
</div>

如何用Angular替换它？到目前为止，我编写了这个代码：

   <select data-ng-model="inverse">
      <option value="??">Sort Up</option>
      <option value="??">Sort Down</option>
   </select>

有人可以告诉我，我是以正确的方式做到这一点，我该如何设置值？

Answer 1

很多取决于您使用的数据，以及您希望用户如何排序，但我在此jsFiddle中创建了一个基本示例，您可以使用：http://jsfiddle.net/xRkhc/2/

HTML：

<div ng-controller="MyCtrl">

  <div ng-repeat="row in gdata | orderBy:sort">
      {{row.model}}
  </div>        

  <select ng-model="sort">
    <option value="model">Sort Up by Model</option>
    <option value="-model">Sort Down by Model</option>
    <option value="topSpeed">Sort Up by TopSpeed</option>
    <option value="-topSpeed">Sort Down by TopSpeed</option>
  </select>    
</div>

控制器：

function MyCtrl($scope) {
    $scope.sort = "model"; //just to set the default sort in the dropdown, not required
    $scope.gdata = [{'model':'M3','topSpeed':'200'},{'model':'Type R','topSpeed':'150'}, {'model':'S2000','topSpeed':'160'},{'model':'NSX','topSpeed':'180'}];
}

Answer 2

当您对选项进行硬编码时（如在代码中），模型只接收字符串或数字，您必须使用ng-options（或等效的data-ng-options）而不是硬编码选项。您可以将选项指定为模型的成员。

这是一个完整的例子：

<!doctype html>
<html data-ng-app>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script>
  var exampleCtrl = function ($scope) {
      $scope.sortingDirection = {
      'Sort Up'   :   true,
      'Sort Down' :   false
  };
  $scope.inverse = true;
  }
</script>
</head>
<body>
    <div data-ng-controller="exampleCtrl">
        <select data-ng-model="inverse" data-ng-options="value as key for (key, value) in sortingDirection">
        </select>
        <pre data-ng-bind="inverse | json"></pre>
    </div>
</body>
</html>

如何在AngularJS中用<select>替换复选框？</select>

2 个答案: