如何禁用AngularJS的闪烁重复？

I'm trying to show some repeated object AFTER receiving submitted query by AngularJS. When I just see the following page without any submitting query, ng-repeat will render one ng-repeat's part of div with no result(thus empty). Why does this occur and how can I disable to show the empty result rendering?

我试图在收到AngularJS提交的查询后显示一些重复的对象。当我只看到以下页面而没有任何提交查询时,ng-repeat将呈现一个ng-repeat的div部分而没有结果(因此为空)。为什么会发生这种情况,如何禁用显示空结果呈现?

html

code

<form ng-submit="doSearch()" ng-keyup="doSearch()" name="myForm">
  <input type="text" placeholder="<%= t('.placeholder') %>" ng-model="query" required>
  <input type="submit" class='button postfix' value="<%= t('.register') %>" ng-disabled="myForm.$invalid">
</form>

<div ng-repeat="result in results">
  <div class="row">
    <div>
      <p ng-bind-html="result.contentSnippet"></p>
    </div>

    <div>
      <a href="/#" target="_blank">link</a>
    </div>
  </div>
</div>

controller

code

google.load "feeds", "1"

kindlers = angular.module("kindlers", [ "ngSanitize" ])

findFeeds = ($scope)->
  google.feeds.findFeeds $scope.query, (result) ->
    console.log $scope.query   
    if $scope.query == "undefined" || result.error
      $scope.results = undefined
    else
      $scope.results = result.entries 
    $scope.$apply()

@mainCtrl = ($scope, $http) ->
  console.log($scope.results)
  $scope.doSearch = ->
    google.setOnLoadCallback findFeeds($scope)

JavaScript(converted from the above CoffeeScript)

JavaScript(从上面的CoffeeScript转换而来)

code is below. console.log($scope.results); shows "undefined".

代码如下。的console.log($ scope.results);显示“未定义”。

(function() {
  var findFeeds, kindlers;

  google.load("feeds", "1");

  kindlers = angular.module("kindlers", ["ngSanitize"]);

  findFeeds = function($scope) {
    return google.feeds.findFeeds($scope.query, function(result) {
      console.log($scope.query);
      if ($scope.query === "undefined" || result.error) {
        $scope.results = void 0;
      } else {
        $scope.results = result.entries;
      }
      return $scope.$apply();
    });
  };

  this.mainCtrl = function($scope, $http) {
    console.log($scope.results);
    return $scope.doSearch = function() {
      return google.setOnLoadCallback(findFeeds($scope));
    };
  };

}).call(this);

3 个解决方案

#1

Make sure in your controller that results is totally empty. You could initialise it like this: $scope.results = [];

确保在控制器中结果完全为空。您可以像这样初始化它:$ scope.results = [];

#2

How about ng-show="result.length > 0'

ng-show =“result.length> 0”怎么样

#3

Initialize $scope.results to {} and default it to {} on error instead of undefined.

将$ scope.results初始化为{}并在出错时将其默认为{}而不是undefined。

google.load "feeds", "1"

kindlers = angular.module("kindlers", [ "ngSanitize" ])

findFeeds = ($scope)->
  google.feeds.findFeeds $scope.query, (result) ->
    console.log $scope.query   
    if $scope.query == "undefined" || result.error
      $scope.results = {}
    else
      $scope.results = result.entries 
    $scope.$apply()

@mainCtrl = ($scope, $http) ->
  $scope.results = {}
  console.log($scope.results)
  $scope.doSearch = ->
    google.setOnLoadCallback findFeeds($scope)

#1