Question

我错过了我的json文件，我似乎无法弄清楚。我正在使用angular创建一个关键字搜索，并使用外部json文件作为数据。目前，没有过滤，它给了我所有的表格单元格，而不是我想要的那些。

最终结果是让它只重复每个类别的主题。并且由于某种原因，它为每个主题重复所有这些，并且仅显示我要求的那些。这留下了空单元的大空隙。

HTML：

        <div class="col-sm-12" style="padding:0px;padding-top:25px;margin-top:180px;">
    <form>
        <div class="form-group" style="border-bottom:1px solid white;">
            <input ng-model="searchText" type="text" class="form-control logon-input" id="username" placeholder="Search" autofocus>
        </div>
    </form>
</div>
<div class="col-sm-12" style="padding:0px;">
    <table class="table">
        <tr>
            <th>CONTENT</th>
        </tr>
        <tr ng-repeat="item in categories | filter:searchText">
            <td>{{item.subject_1}}</td>
        </tr>

        <tr>
            <th>SOCIAL MEDIA</th>
        </tr>
        <tr ng-repeat="item in categories | filter:searchText">
            <td>{{item.subject_2}}</td>
        </tr>

        <tr>
            <th>SOCIAL MEDIA TRACKING</th>
        </tr>
        <tr ng-repeat="item in categories | filter:searchText">
            <td>{{item.subject_3}}</td>
        </tr>

        <tr>
            <th>ENGAGEMENT</th>
        </tr>
        <tr ng-repeat="item in categories | filter:searchText">
            <td>{{item.subject_4}}</td>
        </tr>
    </table>
</div>

角：

    app.controller('search_ctrl', ['$scope','$http', 
     function($scope,$http) {
      $http.get('js/data.json').then(function(response){
       $scope.categories = response.data;
      });
     }]);

JSON：

[
{"subject_1":"Owned Content"},
{"subject_1":"Earned Content"},
{"subject_2":"Social Media Platforms"},
{"subject_2":"Facebook"},
{"subject_2":"Instagram"},
{"subject_2":"Snapchat"},
{"subject_2":"Twitter"},
{"subject_2":"Youtube"},
{"subject_2":"Radarly By Linkinfluence"},
{"subject_3":"Impressions"},
{"subject_3":"Owned Impressions"},
{"subject_3":"Earned Impressions"},
{"subject_3":"Reach"},
{"subject_3":"Owned Reach"},
{"subject_3":"Earned Reach"},
{"subject_4":"Engagement Actions"},
{"subject_4":"Engagement Rate"}

]

Answer 1

Angular正在以你需要更改代码的方式正常工作

这

enabled

到

<tr ng-repeat="item in categories | filter:searchText">
            <td>{{item.subject_4}}</td>
        </tr>

Working demo

按关键字

1 个答案: