当前位置: 首页 > 面试题库 >

在AngularJS中动态排序

申屠宗清
2023-03-14
问题内容

我有一个要根据下拉菜单中的值动态排序的对象数组。到目前为止,这是我的清单:

ng-repeat="item in filteredItems = (items | filter:searchInput | orderBy:canBeAnything)"

但是问题是排序可以是对象的属性,也可以是使用函数的计算值。它还应该能够以降序排序(可选)。

我知道我可以在orderBy后面使用字符串作为canByAnything变量,并传递对象的属性,例如:

“-creationDate” // descending ordering on creation date
“customer.lastname” // ascending ordering on customers last name

我也知道我可以通过如下函数订购:

orderBy:myCalculatedValueFunction // will order in an ascending way based on a calculated value, for example calculating the total price of the object if it was an order or something

但是我不知道并且想要实现的是:

  • 如何将其组合在一起,以便我可以结合对象的属性/属性使用函数进行排序。我的意思是根据用户的选择动态地选择一个或另一个。可以是属性或计算值,可以是降序或升序。
  • 如何以降序方式对计算值排序

问题答案:

更新orderBy:myCalculatedValueFunctionorderBy:dynamicOrderFunction

错误

$scope.dynamicOrderFunction = function() {
    if (orderByString) {
        return '-creationDate';
    }
    else {
        return myCalculatedValueFunction;
    }
}

orderBy还有一个3rd属性,它接受一个布尔值,当时将反转orderBy
true。(orderBy:dynamicOrderFunction:reverseOrder$scope.reverseOrder = true; // or false

编辑

您实际上会遇到尝试以这种方式在字符串之间切换orderBy的问题。检出此jsfiddle以获取有效的动态订单功能。

$scope.dynamicOrder = function(user) {
    var order = 0;
    switch ($scope.order.field) {
        case 'gender':
            order = gender_order[user.gender];
            break;
        default:
            order = user[$scope.order.field];
    }
    return order;
}


 类似资料:
  • 问题内容: 因此从Angular 1.1.4开始,您可以拥有一个动态模板网址。从这里, templateUrl-与模板相同,但是从指定的URL加载模板。由于模板加载是异步的,因此在加载模板之前,将暂停编译/链接。 您可以将templateUrl指定为表示URL的字符串,或者指定为使用两个参数tElement和tAttrs(在下面的编译函数api中进行描述)并返回表示URL的字符串值的函数。 我如何

  • 问题内容: 我目前有一个内置路由的AngularJS应用程序。它可以正常工作,并且一切正常。 我的app.js文件如下所示: 我的应用程序内置了CMS,您可以在其中复制 / pages 目录中的新html文件并添加新的html文件。 即使对于新动态添加的文件,我仍然希望通过路由提供程序。 在理想的情况下,路由模式为: $ routeProvider.when(’/ pagename ‘,{temp

  • 问题内容: 我目前有一个内置路由的AngularJS应用,它与静态属性分配完美配合。但是我真正想做的是为控制器分配不同的路由: 我想做的是在这里对我的财产做同样的事情,例如: 但似乎我得到一个错误,说找不到 所以有什么办法可以在路由配置中动态加载控制器功能名称? 问题答案: 使用angular ui-router可以做到这一点。 ui-router允许您指定“ controllerProvider

  • 问题内容: 我正在尝试使用Angular 1.2将iframe动态插入页面中。这是代码: HTML: js: 因此data.html是一个具有有效HTML开头的字符串 该字符串还包含一些div。所以它看起来像: 我在app.js’ngSanitize’中使用。它显示的是div(在iframe之后),而不是iframe本身。 如果我使用jQuery,基本上 效果很好…但是试图使其正确的angular

  • 问题内容: 动态创建“ inputName”时,有人将如何使用formName.inputName。$ valid? HTML输入属性“名称”的输出将是字符串“ variablename”,该字符串将应用于所有重复输入。 如果我们尝试这个 HTML输入属性“名称”的输出将是字符串“ {{variable.name}}”,该字符串将应用于所有重复输入。 在这两种情况下,将不会动态创建每个重复输入元素

  • 问题内容: 我正在做的事情非常精简,可以解决问题。 我有一个简单的。每当您单击一个元素时,它都会添加另一个元素。但是,需要先对其进行编译才能正确呈现。 我的研究使我走向了。但是所有示例都使用了一个复杂的结构,我真的不知道如何在这里应用它。 小提琴在这里:http : //jsfiddle.net/paulocoelho/fBjbP/1/ JS在这里: Josh David Miller的解决方案: