Question

对于下面的JSON，如果我想为每个对象获取name的值，我应该怎么做？ {{x}}同时显示name和type的值，但{{x.name}}或{{x.type}}不起作用。

此外，如果我使用{{x}}显示名称和类型，如何设置一个可以搜索name的值的过滤器，但显示整行，例如，我输入A，然后显示'A档'。

JSON：

 $scope.test = [{"name":"A","type":"file"},{"name":"B","type":"folder"},{"name":"C","type":"folder"}]

HTML：

<input type="text" ng-model="searchtext">    

<table>
    <tr>
        <th>NAME</th>
        <th>TYPE</th>
    </tr>
    <tr ng-repeat="t in test">
        <td ng-repeat="x in t | filter: searchtext">
        {{x}}
        </td>
    </tr>
</table>

Answer 1

我不知道searchtext是什么样的，但我认为这可能会提出一个想法：

<tr ng-repeat="x in test|filter:searchtext">
  <td>
    <span ng-bind="x.name"></span>
    <span ng-bind="x.type"></span>
  </td>
</tr>

Answer 2

您也可以尝试使用此代码。但是，我添加了一个div元素而不是表格。

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>
<body>
    <div ng-app="app" ng-controller="t">

        <p><input type="text" ng-model="searchtext" /></p>

        <div ng-repeat="x in data | filter:searchtext">

            <div> {{ x.name + ' ' + x.type }} </div>

        </div>
    </div>
</body>

<script>
    var myApp = angular.module('app', []);
    myApp.controller('t', function ($scope) {
        $scope.data = [{ "name": "A", "type": "file" }, { "name": "B", "type": "folder" }, { "name": "C", "type": "folder"}];
    });
</script>
</html>

＆＃13;

Answer 3

 <tr ng-repeat="t in test">
     <td ng-repeat="(key,value) in t | filter: searchtext">
         {{value}}
     </td>
 </tr>

如何使用ng-repeat和filter来获取JSON数据

3 个答案: