如何使用AngularJS过滤Firebase JSON？

我正在用AngularJS调用我的Firebase数据库JSON，并尝试过滤代码。我一直看到数组错误，如：

Error: [filter:notarray] http://errors.angularjs.org/1.4.9/filter/notarray?

我的HTML：

<form>
      <div class="form-group">
        <div class="input-group">
          <div class="input-group-addon"><i class="fa fa-search"></i></div>
          <input type="text" class="form-control" placeholder="Search" ng-model="searchTranslation">
        </div>      
      </div>
    </form>

    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>ID</th>
                <th>English</th>
                <th>Arabic</th>
                <th>Status</th>
                <th>Settings</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="i in translations | filter:searchTranslation track by $index">

                <td>{{$index}}</td>
                <td>{{i.transNameEn}}</td>
                <td class="textarabic">{{i.transNameArabic}}</td>
                <td class="{{i.transStatus}}">{{i.transStatus}}</td>
                <td>
                    <a ng-href="{{url}}pages-edit-translation/{{i.transId}}"
                    class="btn caps btn-warning">
                    EDIT
                    </a>
                </td>
            </tr>
        </tbody>
    </table>

我的JSON：

{
    "00hym5km2tf08s38fr-ivjgnsw6": {
        "notes": "",
        "transCreation": "11/15/2016, 4:14:07 PM",
        "transId": "00hym5km2tf08s38fr-ivjgnsw6",
        "transModified": "11/15/2016, 4:14:07 PM",
        "transNameArabic": "استخدم كعنوان الدفع الافتراضي",
        "transNameEn": "Use as my default billing address",
        "transStatus": "FIXED"
    },
    "08zq3t9411zaketnpnwmi-ivjhzz5q": {
        "notes": "",
        "transCreation": "11/15/2016, 4:51:35 PM",
        "transId": "08zq3t9411zaketnpnwmi-ivjhzz5q",
        "transModified": "11/15/2016, 4:51:35 PM",
        "transNameArabic": "احذية كرة القدم",
        "transNameEn": "Football Shoes",
        "transStatus": "FIXED"
    },
    "0aoycw0b0c9v8ov6xbt9-ivjhwnv6": {
        "notes": "",
        "transCreation": "11/15/2016, 4:49:00 PM",
        "transId": "0aoycw0b0c9v8ov6xbt9-ivjhwnv6",
        "transModified": "11/15/2016, 4:49:00 PM",
        "transNameArabic": "جينز واسع",
        "transNameEn": "Flared Jeans",
        "transStatus": "FIXED"
    }
}

注意：如果我删除

<tr ng-repeat="i in translations | filter:searchTranslation track by $index">

这样做反而有效：

<tr ng-repeat="i in translations">

但很明显，我希望使用搜索表单过滤结果。使用

data.data

在控制台中不显示任何错误

我尝试在http.get上执行

setTimeOut

，并延迟它，以便它首先加载JSON，但它仍然不工作

---

谢谢问题在于

过滤器默认情况下不会过滤对象，即使
ng repeat
可以迭代对象属性。因此，解决这个问题有两种方法：在将对象设置为模型之前将其转换为数组，或者您可以创建一个自定义过滤器（不太可重用）来过滤对象属性

弗斯特
要创建自定义过滤器，可以执行以下操作：

Html

<ANY ng-repeat="item in items | filterObject:myModel">

<ANY ng-repeat="item in items | asArray | filter:myModel">

第二
要将对象转换为数组，您可以在控制器端执行此操作（或创建助手函数、服务等），也可以创建自定义筛选器来执行此操作。例如：

Html

<ANY ng-repeat="item in items | filterObject:myModel">

<ANY ng-repeat="item in items | asArray | filter:myModel">

使用过滤器将数组转换为对象，可以重用
$filter
逻辑，而无需再次实现过滤器解决方案。因此，我认为这比为任务使用自定义筛选器更好。

一个稍微便宜一点的方法是在将其发送到您的模型之前将其转换为数组。但是，您可能希望保留原始属性名称（ID或其他名称）

下面的示例使用第二种方法实现此解决方案（有1秒的延迟来模拟服务器响应或填充
翻译
模型）：


var cmsApp=angular.module（'cmsApp'，[]）；
cmsApp.filter（'asArray'，function（）{
返回函数（obj/*，addKey*/）{
//在未定义的情况下，只需返回相同的对象即可通过
如果（！obj）返回obj；
//将映射为键数组的对象作为项返回
返回Object.keys（obj）.map（函数（键）{
返回obj[键]；
});
};
});
//@pages主页翻译
cmsApp.controller（'pages-home-translation'，函数（$scope，$http，$timeout）{
$scope.sortType='English'；//设置默认排序类型
$scope.sortReverse=false；//设置默认排序顺序
$scope.searchTranslation=''；//设置默认搜索/筛选条件
风险值数据={
“00hym5km2tf08s38fr-ivjgnsw6”：{
“注”：“注”，
“transCreation”：“2016年11月15日下午4:14:07”，
“transId”：“00hym5km2tf08s38fr-ivjgnsw6”，
“变形”：“2016年11月15日下午4:14:07”，
“转名阿拉伯语”：“转名阿拉伯语”，
“transNameEn”：“用作我的默认帐单地址”，
“transStatus”：“已修复”
},
“08zq3t9411zaketnpnwmi-ivjhzz5q”：{
“注”：“注”，
“transCreation”：“2016年11月15日下午4:51:35”，
“transId”：“08zq3t9411zaketnpnwmi-ivjhzz5q”，
“变形”：“2016年11月15日下午4:51:35”，
“转名阿拉伯语”：“转名阿拉伯语”，
“transNameEn”：“足球鞋”，
“transStatus”：“已修复”
},
“0aoycw0b0c9v8ov6xbt9-ivjhwnv6”：{
“注”：“注”，
“transCreation”：“2016年11月15日下午4:49:00”，
“transId”：“0aoycw0b0c9v8ov6xbt9-ivjhwnv6”，
“变形”：“2016年11月15日下午4:49:00”，
“易名阿拉伯语”：“易名阿拉伯语”，
“transNameEn”：“喇叭牛仔裤”，
“transStatus”：“已修复”
}
};
$timeout（函数（）{
$scope.translations=data；//或data.data
}, 1500);
});
元素（文档）.ready（函数（）{
引导（文档，['cmsApp']）；
});

身份证件
英语
阿拉伯文
地位
设置
{{$index}}
{{i.transNameEn}}
{{i.transNameArabic}}
{{i.transStatus}}
根据您的代码需要进行一些更改。首先，
$scope.translations
应该是一个数组，但根据JSON，它不是数组
ng repeat
指令只接受一个数组来重复
数据

您的
$scope.translations
应该与您的
HTML
结构类似：

$scope.translations = [
  {
    "notes": "",
    "transCreation": "11/15/2016, 4:14:07 PM",
    "transId": "00hym5km2tf08s38fr-ivjgnsw6",
    "transModified": "11/15/2016, 4:14:07 PM",
    "transNameArabic": "استخدم كعنوان الدفع الافتراضي",
    "transNameEn": "Use as my default billing address",
    "transStatus": "FIXED"
  },
  {
    "notes": "",
    "transCreation": "11/15/2016, 4:51:35 PM",
    "transId": "08zq3t9411zaketnpnwmi-ivjhzz5q",
    "transModified": "11/15/2016, 4:51:35 PM",
    "transNameArabic": "احذية كرة القدم",
    "transNameEn": "Football Shoes",
    "transStatus": "FIXED"
  },
  {
    "notes": "",
    "transCreation": "11/15/2016, 4:49:00 PM",
    "transId": "0aoycw0b0c9v8ov6xbt9-ivjhwnv6",
    "transModified": "11/15/2016, 4:49:00 PM",
    "transNameArabic": "جينز واسع",
    "transNameEn": "Flared Jeans",
    "transStatus": "FIXED"
  }
];

工作演示：


var cmsApp=angular.module（'myApp'，[]）；
cmsApp.controller（'pages-home-translation'，函数（$scope，$http）{
$scope.sortType='English'；//设置默认排序类型
$scope.sortReverse=false；//设置默认排序顺序
$scope.searchTranslation=''；//设置默认值
$scope.translations=[
{
“注”：“注”，
“transCreation”：“2016年11月15日下午4:14:07”，
“transId”：“00hym5km2tf08s38fr-ivjgnsw6”，
“变形”：“2016年11月15日下午4:14:07”，
“转名阿拉伯语”：“转名阿拉伯语”，
“transNameEn”：“用作我的默认帐单地址”，
“transStatus”：“已修复”
},
{
“注”：“注”，
“transCreation”：“2016年11月15日下午4:51:35”，
“transId”：“08zq3t9411zaketnpnwmi-ivjhzz5q”，
“变形”：“2016年11月15日下午4:51:35”，
“转名阿拉伯语”：“转名阿拉伯语”，
“transNameEn”：“足球鞋”，
“transStatus”：“已修复”
},
{
“注”：“注”，
“transCreation”：“2016年11月15日下午4:49:00”，
“transId”：“0aoycw0b0c9v8ov6xbt9-ivjhwnv6”，
“变形”：“2016年11月15日下午4:49:00”，
“易名阿拉伯语”：“易名阿拉伯语”，
“transNameEn”：“喇叭牛仔裤”，
“transStatus”：“已修复”
}
];
});
表，th，td{
边框：1px纯黑；
}

$http.get(firebase_url+'cms/translations.json'+randstatus).success(function(data) {    
    var myData = Object.keys(data).map(function(key) {
        return obj[key];
    });    
    $scope.translations = myData;    
});

$scope.translations = [
  {
    "notes": "",
    "transCreation": "11/15/2016, 4:14:07 PM",
    "transId": "00hym5km2tf08s38fr-ivjgnsw6",
    "transModified": "11/15/2016, 4:14:07 PM",
    "transNameArabic": "استخدم كعنوان الدفع الافتراضي",
    "transNameEn": "Use as my default billing address",
    "transStatus": "FIXED"
  },
  {
    "notes": "",
    "transCreation": "11/15/2016, 4:51:35 PM",
    "transId": "08zq3t9411zaketnpnwmi-ivjhzz5q",
    "transModified": "11/15/2016, 4:51:35 PM",
    "transNameArabic": "احذية كرة القدم",
    "transNameEn": "Football Shoes",
    "transStatus": "FIXED"
  },
  {
    "notes": "",
    "transCreation": "11/15/2016, 4:49:00 PM",
    "transId": "0aoycw0b0c9v8ov6xbt9-ivjhwnv6",
    "transModified": "11/15/2016, 4:49:00 PM",
    "transNameArabic": "جينز واسع",
    "transNameEn": "Flared Jeans",
    "transStatus": "FIXED"
  }
];