在Angular js中使用Json过滤表答案

【问题标题】：Filtering Table Using Json in Angular js在Angular js中使用Json过滤表
【发布时间】：2015-10-20 00:49:15
【问题描述】：

我想问是否可以在这个简单的表格代码中使用 Json 以角度形式放置一个过滤器？我是 Angular 和 Json 的新手。希望有人能让我摆脱这个问题。过滤器将基于事件，就像您选择名称 John Drake 一样，它将删除剩下的名称。它会在您选择时显示匹配名称，并在所选名称中显示以下描述，例如表格中的帐户位置和活动，任何建议 guis？希望有人能帮我弄清楚，我 1 周的反复试验。

table.html

  <!DOCTYPE html>
<html ng-app="myTable">
<head>
    <title>project  43</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"></script>
<script type="text/javascript">
    var myTable=angular.module('myTable',[]);
    myTable.controller('tableCtrl',function($scope,$http){
        $http.get("Table.json").success(function(response) {
        debugger
        $scope.members=response.events;
         $scope.totals = response.paging;
    });

    });
    </script>
</head>
<body ng-controller="tableCtrl">

  <th colspan="7" style="text-align:right">         
    <i class="fa fa-search">search   <select ng-model="searchObj.Table" ng-options="item.Table as item.Event for item in filtertable">  <option value="">--Select--</option> </select> </i></th>    

<table id="filtertable"border="5">
   <tr>
    <th>Event</th>
     <th>Account Shop</th>
     <th>Place</th>
     <th>Activity</th>
   </tr>

    <tr ng-repeat="member in members">
    <td>

    {{member.Event.name}}<br>
    {{member.Event.id}}<br>
    {{member.Event.date_start}}<br>
    {{member.Event.date_end}}<br>


    <td>
    {{member.AccountShop.id}}<br>
    {{member.AccountShop.name}}<br>
    {{member.AccountShop.short_code}}<br>
    </td>

    <td >
    <div ng-repeat="Place in member.Place">
    {{Place.id}}<br>
    {{Place.name}}<br>
    {{Place.lk_country_code}}<br>
    </div>
    </td>

    <td>
    <div ng-repeat="Activity in member.Activity">
    {{Activity.id}}<br>
    {{Activity.short_description}}
    </div>

    </td>
    </table>
</body>
</html>

Table.json

 {
    "events": [
        {
            "Event": {
                "name": "John Drake",
                "id": "59",
                "date_start": "Start 2007-07-06 ",
                "date_end": "End 2007-07-08 "
            },
            "AccountShop": {
                "id": "1",
                "name": "Bike Pte",
                "short_code": "GILL"
            },
            "Place": [
                {
                    "id": "537",
                    "name": "Was",
                    "lk_country_code": "MY"
                }
            ],
            "Activity": [
                {
                    "id": "5671",
                    "short_description": "Bike\r\n"
                }
            ]
        },
        {
            "Event": {
                "name": "Paul Smith",
                "id": "60",
                "date_start": "Start2007-07-13",
                "date_end": "Start 2007-07-15 "
            },
            "AccountShop": {
                "id": "1",
                "name": "Run Pte",
                "short_code": "GILL"
            },
            "Place": [
                {
                    "id": "537",
                    "name": "Cal",
                    "lk_country_code": "MY"
                }
            ],
            "Activity": [
                {
                    "id": "234",
                    "short_description": "Run\r\n"
                }
            ]
        },
        {
            "Event": {
                "id": "61",
                "name": "Thomas Dale",
                "date_start": "Start 2007-07-20 ",
                "date_end": "End 2007-07-22 "
            },
            "AccountShop": {
                "id": "1",
                "name": "Dive Pte",
                "short_code": "JILE"
            },
            "Place": [
                {
                    "id": "47",
                    "name": "Hou",
                    "lk_country_code": "MA"
                }
            ],
            "Activity": [
                {
                    "id": "123",
                    "short_description": "Dive\r\n"
                }
            ]
        }
    ]
}

【问题讨论】：

标签： json angularjs parsing filter filtering

【解决方案1】：

使用输入类型文本：

<input type="text" name="nom" ng-model="search.Event.name" />

而你是 ng-repeat

<tr ng-repeat="member in members | filter:search track by $index ">

在过滤或订购时不要忘记track by $index。

【讨论】：

谢谢你，按索引跟踪会怎么样？ ,, 该项目甚至在我的表中过滤了开始日期和结束日期以及事件下的名称,
你可以使用"$index"，它会为每一行分配一个索引。如果您想搜索日期，您可以在正确的属性“search.Event.date_start”上添加/更改您的 ng-model
非常感谢@alexis 它可以工作，我认为它的编码很长，最后一个问题，我如何添加多个模型以在事件下添加一些搜索，例如在正确的属性 tnx 上的开始日期！回答了祈祷。！
您可以使用 ng-model="search.Event.yourproperty" 插入其他输入。过滤器：搜索查看所有 ng-model "search.xxxx"。如果您想对所有属性进行过滤，您可以使用 search.$ 或 search.Event.$
我明白了，谢谢！，终于成功了，！回答了