Question

我有一个电影列表，我想通过下拉列表中的选择进行排序。我正在使用自定义函数进行排序以排除非数字选项。它直接传递函数时工作正常，但我不知道如何将该函数作为下拉列表中的值传递。

    <select name="sort" id="" ng-model="filters">
        <option value="sortByRtRating">Rotten Tomatoes rating</option>
        <option value="sortByImdbRating">IMDB rating</option>
    </select>

<div ng-repeat="movie in movieList | toArray | orderBy:filters.sort:true">

$scope.sortByRtRating = function(item) {
  if (!item.details) return -1;
  if (typeof item.details.rt.rating != 'number')
    return -1;
  return item.details.rt.rating;
}  

$scope.sortByImdbRating = function(item) {
  if (!item.details) return -1;
  if (typeof item.details.imdb.rating != 'number')
    return -1;
  return item.details.imdb.rating;
}

Answer 1

有两种方法可以解决这个问题 - 取决于您实施select的方式 - 以及选择的ng-model将保留的内容。

＃1 - 将函数名称作为select

的ng-model

当你创建一个select正常<options>时 - 即没有ng-options（正如你所做的那样） - ng-model只能将函数名称保存为字符串 - 是<option>的值。

<select ng-model="filterFnName">
  <option value="sortByRtRating">Rotten Tomatoes rating</option>
  <option value="sortByImdbRating">IMDB rating</option>
</select>

然后你需要$eval从函数名中获取函数（函数需要在作用域上公开）：

<div ng-repeat="movie in movieList | orderBy:$eval(filterFnName):true">{{movie}}</div>

＃2 - 功能为选择

的ng模型

这仅适用于ng-options，因为Angular可以绑定到复杂对象（包括函数）。

您可以在控制器中定义以下内容：

$scope.filterFns = [
    {l: "Rotten Tomatoes rating", fn: sortByRtRating}, 
    {l: "IMDB rating", fn: sortByImdbRating}
];
$scope.filterFn = sortByRtRating;

function sortByRtRating(item){...}

function sortByImdbRating(item){...}

您可以选择并使用实际的功能对象：

<select ng-model="filterFn" ng-options="f.fn as f.l for f in filterFns">
</select>

<div ng-repeat="movie in movieList | orderBy:filterFn:true">{{movie}}</div>

plunker

将函数作为AngularJS中的选择值传递

1 个答案: