如何使用 ng-repeat 和过滤器来获取 JSON 数据

How can I use ng-repeat and filter to get JSON data

本文关键字：获取 JSON 数据 过滤器 何使用 ng-repeat      更新时间：2023-09-26

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

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

杰森： 

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

目录：

<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>
我不知道

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

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

尝试此代码。但是，我添加了一个div 元素而不是表格。

<!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>

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