Firebase / AngularJS嵌套ng-repeat与搜索过滤器问题

时间:2015-02-28 11:10:59

标签: angularjs angularjs-ng-repeat firebase angularfire angular-filters

从Firebase获取数据并执行嵌套的ng-repeat时,我遇到了一个有趣的问题。当第二个循环的第一个键不为0时,过滤器不起作用。

请参阅下文,了解Firebase中数据的结构。请注意,问题2不包含键为0的选项。

filtertest -- questions -- 1 -- name: "question1" -- options -- 0 -- name: "option1" -- 1 -- name: "option2" -- 2 -- name: "option3" -- 2 -- name: "question2" -- options -- 3 -- name: "option1" -- 4 -- name: "option2" -- 3 -- name: "question3" -- options -- 0 -- name: "option1" -- 3 -- name: "option3" -- 4 -- name: "option4"

代码如下:



angular.module('myapp',['firebase'])
.controller('FirebaseController', function($scope, $firebase){

  ref = new Firebase('https://filtertest.firebaseio.com/questions');
  $scope.questions = $firebase(ref).$asArray();

  console.log($scope)

});

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <title>tallytab</title>
</head>

<body>

    <h1>Firebase</h1>
    <div ng-controller="FirebaseController">
        <div ng-repeat="question in questions">
            <h2>{{ question.name }}</h2>
            <div><input ng-model="search" />
            <div ng-repeat="option in question.options | filter:search">
                {{ option.name }}
            </div>
        </div>
    </div>

    <!-- AngularJS -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
    <!-- Firebase -->
    <script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
    <!-- AngularFire -->
    <script src="https://cdn.firebase.com/libs/angularfire/0.9.2/angularfire.js"></script>

    <script src="app.js"></script>

</body>
</html>
&#13;
&#13;
&#13;

您将看到问题2中的选项不可过滤,因为没有key = 0。只需要一个键= 0。它后面可以跟一个键= 3,依此类推。问题3的过滤效果很好。

有人知道为什么会这样吗?我怎样才能做到这一点?键= 0的选项可能会被删除,从而弄乱我的过滤器。

0 个答案:

没有答案