首页 文章

角度过滤器混乱

提问于
浏览 次
0

所以我的firebase中有一个用户列表 . 现在我向每个用户展示这样的：

<input type="text" ng-model="search.username" placeholder="{{ 'SEARCH_USERS' | translate}}" class="form-control"> 

<ul>
    <li ng-repeat="user in users | usernameFilter:search.username ">
        <a href="#/report/{{user.username}}">{{user.username}}: {{user.firstname}} {{user.lastname}}</a> 

    </li>
</ul>
<p ng-show="error" >{{error}}</p>

Search.username或搜索没有区别，过滤器什么都不做 . 这是我的用户参考的样子：

Object {$id: "users", $bind: function, $add: function, $save: function, $set: function…}
$add: function (item) {
$auth: function (token) {
$bind: function (scope, name, defaultFn) {
$child: function (key) {
$getIndex: function () {
$getRef: function () {
$id: "users"
$off: function (type, callback) {
$on: function (type, callback) {
$remove: function (key) {
$save: function (key) {
$set: function (newValue) {
$transaction: function (updateFn, applyLocally) {
$update: function (newValue) {
Battle: Object
Litchy: Object
Robin: Object
__proto__: Object

Battle，Litchy和Robin都是用户 . 我想知道如何通过用户名过滤此列表，AngularJS文档示例中的简单方法似乎不适用于此，因为我的引用上没有明确的用户名属性 .

编辑：Firebase结构截图：

firebase

javascript angularjs firebase angularfire

2 回答

  • 1

    如果我理解correclty，你想过滤"by key" .
    Angular的 filter 过滤器过滤了迭代对象的"values"，但您可以使用自定义过滤器按键过滤：

    <div ng-repeat="user in users | byKey:search.username">

app.filter('byKey', function () {
    return function (obj, username) {
        if (!username) { return obj; }
        username = username.toLowerCase();

        var filtered = {};
        angular.forEach(obj, function (value, key) {
            if (key.toLowerCase().indexOf(username) !== -1) {
                filtered[key] = value;
            }
        });
        return filtered;
    };
});

    注意：我已经实现了过滤器来执行不区分大小写的子串匹配 . 您应该根据您的要求进行修改 .

    另见， short demo .

    回复于
  • 2

    @ExpertSystem对角度滤波器方法的工作提供了一些很好的见解 . 您还可以使用 orderByPriority 将$ firebase对象转换为有序数组，使用Angular的过滤工具可以更简单地工作：

    <li ng-repeat="user in users | orderByPriority | usernameFilter:search.username ">
    <a href="#/report/{{user.username}}">{{user.username}}: {{user.firstname}} {{user.lastname}}</a> 
    
</li>

    另请注意，在即将发布的AngularFire版本中，orderByPriority可能会被一些更高级的数组工具（$ asArray）所取代 .

    回复于

相关问题