簡體   English   中英

ng-repeat過濾器未應用

[英]ng-repeat filter not applied

我有一個簡單的代碼,可以按間隔提取一些數據並將其打印到表中。 我想過濾表行,但是我嘗試應用的所有過濾器都會被忽略。 我想念什么? 這基本上是AngularJS 文檔頁面的純副本。

這里唯一的區別似乎是我使用的是控制器,而示例代碼並未使用。

示例Plunkr

HTML模板:

<table>
  <thead>
    <tr>
      <th>Pages</th>
      <th>Last action</th>
      <th>Total time</th>
    </tr>
    <tr>
      <th><input ng-model="search.count"></th>
      <th><input ng-model="search.last"></th>
      <th><input ng-model="search.time"></th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in adminCtrl.rows | filter:search ">
      <td>{{ row.count }}</td>
      <td>{{ row.last }}</td>
      <td>{{ row.time }}</td>
    </tr>
  </tbody>
</table>

控制器:

(function(){
  var app = angular.module('admin', []);

  app.controller('AdminController', ['$interval', '$http', function($interval, $http){
    var admin = this;
    admin.rows = [];
    var timer = undefined;

    function updateRows() {
      $http.get('test.json').success(function(data) {
        admin.rows = data;
      });
    }

    admin.stopTimer = function() {
      if (angular.isDefined(timer)) {
        $interval.cancel(timer);
        timer = undefined;
      }
    };

    admin.startTimer = function(delay) {
      if (!angular.isDefined(delay)) {
        // Default interval 10 seconds.
        delay = 10000;
      }

      if (!angular.isDefined(timer)) {
        timer = $interval(updateRows, delay);
      }
    };

    admin.isTimerRunning = function() {
      return angular.isDefined(timer);
    }

    // Initialize rows.
    updateRows();

    // Start the interval timer.
    admin.startTimer();

  }]);

})();

這是因為您的ng-repeat是在對象而非數組上重復,這是您的adminCtrl.rows:

{"a":{"count":14,"last":"Lorem ipsum","time":45},"b":{"count":5,"last":"Some title","time":13}}

使其成為數組:

[{"count":14,"last":"Lorem ipsum","time":45},{"count":5,"last":"Some title","time":13}}]

如果要對對象使用過濾器,則必須使用

.filter("MY_FILTER", function(){
    ...
});

過濾器僅適用於數據為對象的array 只需將數據轉換為數組即可。 如果您碰巧使用lo-dash ,那就很容易做到:

function updateRows() {
    $http.get('test.json').success(function(data) {
        admin.rows = _.toArray(data);
    });
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM