Angularjs 角度对象过滤器和orderBy_Angularjs_Ionic Framework

Angularjs 角度对象过滤器和orderBy

angularjs ionic-framework

Angularjs 角度对象过滤器和orderBy,angularjs,ionic-framework,Angularjs,Ionic Framework,我已从服务器接收对象，如下所示： Object { 0: "girl night", 1: "martini", 2: "burger", 3: "folk", 4: "laughter house" } 使用ng repeat可以正确显示，但当我使用用户筛选器或orderBy时，会出现此错误 <ion-list> <ion-item ng-repeat="item in MyKeyword" ng-click="changeText(item)">{{item

我已从服务器接收对象，如下所示：

Object {
0: "girl night", 
1: "martini", 
2: "burger", 
3: "folk", 
4: "laughter house"
}

使用ng repeat可以正确显示，但当我使用用户筛选器或orderBy时，会出现此错误

<ion-list> <ion-item ng-repeat="item in MyKeyword" ng-click="changeText(item)">{{item}}</ion-item> </ion-list>

{{item}

ionic.bundle.js:25642错误：[filter:notarray]应为数组，但收到：{“0”：“女孩” “夜”，“1”：“马提尼”，“2”：“汉堡”，“3”：“民谣”，“4”：“笑声之家”}

如何使用过滤器使其正常工作？

错误本身明确说明了原因。不能在json对象上进行这样的迭代。理想情况下，你的回答应该是[“女孩之夜”，“马提尼”，“汉堡”，“民谣”，“笑声之家”]这样才能工作

如果不想更改服务响应格式。然后，像这样迭代

<ion-list> <ion-item ng-repeat="(key, value) in MyKeyword" ng-click="changeText(value)">{{value}}</ion-item> </ion-list>

{{value}

您可以将给定对象转换为数组，然后在其上重复ng

在JS中：

   var convertedToArray = Object.keys(MyKeyword).map(function (key) {return obj[key]});

在HTML中：

<ion-list> <ion-item ng-repeat="item in convertedToArray" ng-click="changeText(item)">{{item}}</ion-item> </ion-list>

{{item}

过滤器仅支持数组，但您的服务器显然会返回对象。因此，您必须将对象转换为数组

执行此转换的一种简单方法是使用下划线.js。比如：

_.值（{1:1，2:2，3:3}）； =>[1,2,3]

所以情况是 1制作自己的过滤器，可能命名为toArray，在过滤器中使用下划线转换为数组并返回。 2使用普通过滤器再次过滤。 3该模板将如下所示：

ng repeat=“MyKeyword中的项| toArray | filter:xxx”

我尝试生成快速代码，以模拟您试图实现的目标

<!DOCTYPE html>
<html ng-app>
    <body>

    <div ng-init="data={'0': 'first', '1': 'second', '2': 'third'}">
        <li ng-repeat="item in data">{{item}}</li>
    </div>

    <hr />

    <div ng-init="data=['first', 'second', 'third']">
        <li ng-repeat="item in data">{{item}}</li>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
    </body>
</html>

或者，如果您也想存储索引，则需要对象数组。您可以通过以下方式实现：

var arr = [];
for (var item in object) { 
    arr.push({ id: item, value: object[item] }); 
}

一旦您使用了阵列，请对其进行筛选

来自HTML

如果要从HTML级别执行此操作，可以使用

ng repeat

和

key

value

语法

<ion-item ng-repeat="(key, value) in MyKeyword">{{value}}</ion-item>

{{value}

希望能有所帮助。

谢谢IndieForger，我用你的代码将对象转换为数组，效果很好。

<ion-item ng-repeat="(key, value) in MyKeyword">{{value}}</ion-item>