CODEWITHSUNDEEP
javascriptangularjs
vincentf
vincentf

Reputation: 1499

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

For the JSON below, if I want to get value of name for every object, how should I do it? {{x}} shows both value of name and type, but {{x.name}} or {{x.type}} doesn't work.

Also, If I use {{x}} to display name and type, how do I set a filter which can search value of name, but show the whole line, for example, I type A, then shows 'A file'.

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>

Upvotes: 3

Views: 102

Answers (3)

Ved
Ved

Reputation: 12093

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

Upvotes: 0

Arun Banik
Arun Banik

Reputation: 470

You may also try this code. However, I have added a div element instead of a table.

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

Upvotes: 1

dvenkatsagar
dvenkatsagar

Reputation: 936

I dont know what searchtext is like, but I think this may give an idea:

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

Upvotes: 1

Related Questions