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

Pass function as select value in AngularJS

本文关键字：选择 值传 AngularJS 函数      更新时间：2023-09-26

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

    <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;
}
有两种

方法可以解决这个问题 - 具体取决于您如何实现select - 从而选择ng-model将包含什么。

#1 - 将函数名称作为选择的 ng 模型

当您使用正常<options>创建select时 - 即没有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>

普伦克

相关文章：