ng-repeat无法根据过滤器搜索刷新显示结果

问题描述 投票:0回答:1

我的ng-repeat很好地显示了结果,但是在搜索框中键入后,它没有按照搜索结果过滤结果。请帮忙。另外,我从http.get获取数据我是angular js的新手,如果您在搜索框中不输入任何内容,便能帮助您重复搜索结果而什么也不显示。我使用ng-show可以帮助最初停止显示主题和响应是我在工作表中的列标题

        <html>
                <head>
                <style>
                    * {
              box-sizing: border-box;
            }

            html,
            body {

            }

            input {
                font-size: 14px;
              border-radius: 5px;
              font-size: 12px;
              height: 40px;
              background-color:#1C1B1B;
                color: white;
                font-weight: Bold;
              position: absolute;
              width: 50%;
            }
            input:focus {
              outline: none;
            }


            .black {
              padding: 60px;

              background: black;


            }

            * {
              margin: 0;
              padding: 0;
            }


            input:focus {
              outline: none;
            }

                    </style>

            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

            <script>
            var data;

//以下是从中获取数据的URL//从Json URL获取数据:https://spreadsheets.google.com/feeds/list/153Obe1TdWlIPyveZoNxEw53rdrghHsiWU9l-WgGwCrE/od6/public/values?alt=json

我尝试的一种实现方式如下

var app=angular.module('sample', []);    
app.controller('sampleController',function($scope,$http) {

    var url = "https://spreadsheets.google.com/feeds/list/153Obe1TdWlIPyveZoNxEw53rdrghHsiWU9l-WgGwCrE/od6/public/values?alt=json";

    $http.get(url)
    .success(function(data, status, headers, config) {
        $scope.users = data.feed.entry;         
        //alert($scope.users);
    })
    .error(function(error, status, headers, config) {
         console.log(status);
         console.log("Error occured");
    });
});

我尝试的第二种实现方式如下

angular.module('sample', []).
 controller('sampleController', ['$scope', '$http', function ($scope, $http) {              
    var url = "https://spreadsheets.google.com/feeds/list/153Obe1TdWlIPyveZoNxEw53rdrghHsiWU9l-WgGwCrE/od6/public/values?alt=json";

    $http.get(url)
    .success(function(data, status, headers, config) {     
         $scope.$parent.users = data.feed.entry;
         //alert($scope.users);
    })
    .error(function(error, status, headers, config) {
         console.log(status);
         console.log("Error occured");
    });    
}]);
<div ng-app="sample" ng-controller="sampleController">        
    <div class="black">      
        <input type="text" name="search" ng-model="search.$"
               placeholder="search" ng-click="didSelectLanguage()"></input>          
    </div>
    <br>
    <br>
    <br>
  <table  style="border: 1px solid black ;">
    <tbody>
        <tr>
            <td><center><b>Question</b></center></td>
            <td ><center><b>Response</b></center></td>
        </tr>
      <tr ng-repeat="user in users | filter:search">
        <td style="border: 1px solid black ; width:30%;white-space: pre-wrap;">{{user.gsx$topic.$t}}</td>
        <td style="border: 1px solid black ; width:70%;white-space: pre-wrap;">{{user.gsx$response.$t}}</td>
      </tr>
    </tbody>
  </table>
</div>
angularjs angularjs-scope angularjs-ng-repeat appscript
1个回答
0
投票

如果要在$ scope.users的单个字段上添加搜索过滤器,则必须从json指定该属性

<div ng-repeat="user in users | filter: { gsx$topic.$t : search}">

也请更新模态输入为:

<input type="text" name="search" ng-model="search" placeholder="search" ng-click="didSelectLanguage()"></input> 
© www.soinside.com 2019 - 2024. All rights reserved.