Javascript AngularJS表格过滤器_Javascript_Html_Angularjs

Javascript AngularJS表格过滤器

javascript html angularjs

Javascript AngularJS表格过滤器,javascript,html,angularjs,Javascript,Html,Angularjs,我正在尝试使用angularJS过滤表中的数据。我需要从一个json文件加载数据，该文件如下（示例文件）这是我的HTML文件： <!DOCTYPE html> <html> <head> <script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></s

我正在尝试使用angularJS过滤表中的数据。我需要从一个json文件加载数据，该文件如下（示例文件）

这是我的HTML文件：

    <!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
<script data-require="ng-table@*" data-semver="0.3.0" src="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.js"></script>

<link data-require="ng-table@*" data-semver="0.3.0" rel="stylesheet" href="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.css" />
<link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />



 <link rel="stylesheet" href="style.css" />
        <script src="script.js"></script>
    </head>

<body ng-app="main" ng-controller="DemoCtrl">


    <table ng-table="tableParams" show-filter="true" class="table">
    <tr ng-repeat="tests in test ">

        <td data-title="'Date'">
            {{test.date}}
        </td>
        <td data-title="'Computer/Server Name'">
            {{test.deviceName}}
        </td>
        <td data-title="'username'" filter="{ 'name': 'text' }">
            {{test.name}}
        </td>
        <td data-title="'Device Type'">
            {{test.deviceType}}
        </td>
    </tr>
</table>

</body>
</html>

当alert函数返回所有数据时，文件被读取，但是表中没有显示任何内容

使用

<tr ng-repeat="tests in test ">

    <td data-title="'Date'">
        {{tests.date}}
    </td>
    <td data-title="'Computer/Server Name'">
        {{tests.deviceName}}
    </td>
    <td data-title="'username'" filter="{ 'name': 'text' }">
        {{tests.name}}
    </td>
    <td data-title="'Device Type'">
        {{tests.deviceType}}
    </td>
</tr>


{{tests.date}
{{tests.deviceName}
{{tests.name}
{{tests.deviceType}

您的Json无效，所有属性都应该用双引号括起来

[
    {
        "name": "Moroni",
        "age": 50,
        "deviceName": "test"
    },
    {
        "name": "Tiancum",
        "age": 43,
        "deviceName": "test"
    },
    {
        "name": "Jacob",
        "age": 27,
        "deviceName": "test"
    },
    {
        "name": "Nephi",
        "age": 29,
        "deviceName": "test"
    }
]

您还应该将从Ajax检索到的数据绑定到

$scope.tables

您在控制器中的何处声明了测试？？您可以在Plunkers中共享您的代码吗？您的json文件中没有日期和服务器名称，那么您从何处获取这些数据，您只从json文件中获取数据？wright？将html改为：并且可以工作。谢谢！

<tr ng-repeat="tests in test ">

    <td data-title="'Date'">
        {{tests.date}}
    </td>
    <td data-title="'Computer/Server Name'">
        {{tests.deviceName}}
    </td>
    <td data-title="'username'" filter="{ 'name': 'text' }">
        {{tests.name}}
    </td>
    <td data-title="'Device Type'">
        {{tests.deviceType}}
    </td>
</tr>

[
    {
        "name": "Moroni",
        "age": 50,
        "deviceName": "test"
    },
    {
        "name": "Tiancum",
        "age": 43,
        "deviceName": "test"
    },
    {
        "name": "Jacob",
        "age": 27,
        "deviceName": "test"
    },
    {
        "name": "Nephi",
        "age": 29,
        "deviceName": "test"
    }
]