Question

我试图在对象列表上应用过滤器，但我无法使其工作。我读过AngularJS没有提供＆＃34;开箱即用＆＃34;倍数对象过滤，可能是它无法正常工作的原因？

这是我的代码：

<div class="list list-inset">
    <label class="item item-input" id="events-search">
        <i class="icon ion-search placeholder-icon"></i>
        <input type="text" placeholder="Rechercher parmis les evenements" ng-model="nsearch">
    </label>
</div>

<div class="list">

    <a class="item item-thumbnail-left" href="#" ng-repeat="info in infos | filter:nsearch">
        <img src="xxx">
        <h2>{{ info.name }}</h2>
        <p>{{ info.date}} à {{ info.hour }}</p>
    </a>

</div>

例如，＆＃34; infos＆＃34;价值将是这样的：

Q5PAvIQ2x8TLNkZmhTr59s984ALI5s10 {
    name: "This is an event",
    ...
},
jj8oB6WemYVsGZ1FSm31DFBtSlM0pfZK {
    name: "This is a second event",
    ...
}

我试图按名称过滤。

有没有人有想法？...谢谢！

Answer 1

如果您的数据位于哈希表而不是实际数组中，那么您需要使用键值表示法来访问ng-repeat中的数据：

<input type="text" ng-model="view.searchStr"/>

在这样的安排中，角度过滤器不能简单地应用于非数组，因此您可以在您的示波器上创建一个自定义过滤功能，从输入中获取它的值：

$scope.infos = {
    Q5PAvIQ2x8TLNkZmhTr59s984ALI5s10: {
        name: "This is an event"
    },
    jj8oB6WemYVsGZ1FSm31DFBtSlM0pfZK: {
        name: "This is a second event"
    }
};

$scope.view = {
    searchStr : ""
}

$scope.searchedInfos = function(){

    var searched = {};

    if ($scope.view.searchStr) {

        angular.forEach($scope.infos, function(value, key){

            if (value.name.toLowerCase().indexOf($scope.view.searchStr.toLowerCase()) != -1) {

                searched[key] = value;

            }
        });

    }

    else {

        searched = $scope.infos;
    }

    return searched;
}

并在范围内：

    <div class = "container">
        <div class = "container col-xs-6">
            <div id = "banners" class="carousel-slide" data-ride="carousel">
                <div class = "carousel-inner">
                    <ol class = "carousel-indicators">
                        <li data-target = "#banners" data-slide-to = "0" class = "active"></li>
                        <li data-target = "#banners" data-slide-to = "1"></li>
                        <li data-target = "#banners" data-slide-to = "2"></li>
                    </ol>
                    <div class = "item active">
                        <img id = "banners" src = 'images\slide5.jpg' class = "img-responsive"/>
                    </div>
                    <div class = "item">
                        <img id = "banners" src = 'images\slide4.jpg' class = "img-responsive"/>
                    </div>
                    <div class = "item">
                        <img id = "banners" src = 'images\slide3.jpg' class = "img-responsive"/>
                    </div>
                </div>
                <script type='text/javascript'>
                    $(document).ready(function() {
                         $('.banners').carousel({
                             interval: 2000
                         })
                    });    
                </script>
            </div>
        </div>
    </div>

Here is a working fiddle

Answer 2

如果infos是一个对象数组，你想要按名称过滤而不是系统中的所有对象变量，所以你需要做的就是将搜索变量转换为一个对象，但在同一个变量中要使用

搜索的名称

在你的代码中，你只需要将输入的ng-model转换成这样的

<input type="text" placeholder="Rechercher parmis les evenements" ng-model="nsearch.name">

并完成剩下的代码

Answer 3

由于名称是可变的并且在重复中不可用，您可以通过索引

引用

<h2>{{ info[0].name }}</h2>
        <p>{{ info[0].date}} à {{ info[0].hour }}</p>

在你的'类似这样的'json数组中你可能需要一个逗号

[Q5PAvIQ2x8TLNkZmhTr59s984ALI5s10 , {
    name: "This is an event",
...},
jj8oB6WemYVsGZ1FSm31DFBtSlM0pfZK ,  {
    name: "This is a second event",
...},

...]

，每个info元素只有1个元素，可以用[0]

引用

多个数组

3 个答案: