文本未在Angular JS中顯示

Question

我的這段代碼應該顯示一個h4，如果搜索查詢與任何字符串都不匹配，則表示沒有產品。 我現在有一個奇怪的錯誤，我的文本沒有顯示。 它在html和css（控制台）中可用，並且在我單擊綁定了click（）的元素或在css（控制台）中編輯顏色后可以使用。 有誰知道這可能是什么以及我如何解決這個問題，嘗試了很多東西，但似乎無濟於事？

我像這樣添加它->

<h4 ng-show="filteredItems.length == 0"  class="explanation">We found no products</h4>

的CSS

h4 {
    color: #ccc;
    text-align: center;
    padding: 100px 20px;
  }

搜索

$scope.searchItem = function( query ) {
    foundItems = [];
    query.toLowerCase();
    if( searchTimeout )
      $timeout.cancel( searchTimeout );

    searchTimeout = $timeout( function() {
      for( var i = 0; i < $scope.items.length; i++ ) {
        if( $scope.items[i].name.toLowerCase().indexOf( query ) > -1 ) 
          foundItems.push( $scope.items[i] );
      }

      $scope.filteredItems = foundItems;   

    }, 400);
  }

編輯

    // fill with dummy data
      $scope.define = function() {
        var random;
        for( var i = 0; i < 114; i++ ) {
          random = Math.floor(Math.random() * 6) + 1;
          var text;
          switch( random ) {
            case 1:
                text = 'Double espresso';
                break;
            case 2:
                text = 'Frappuccino cookie crumble chocolate'
                break;
            case 3:
              text = 'Cappuccino'
                break;
            case 4:
              text = 'Very Berry Hibiscus Starbucks Refreshers™ Beverage'
              break;
            case 5:
              text = 'Clover® Brewed Coffee Coffee Traveler'
              break;
            case 6:
              text = 'Featured Dark Roast'
              break;
            default:
                text = 'Not defined'
          }
          $scope.data.items.push( { name: text, image: random } );
        }
// THIS LINE CAUSES THE PROBLEM ( uncommented everything works )
        //$scope.data.filteredItems = $scope.data.items;
      }
      $scope.define();

Answer 1

試試這個plnkr 。 我讓它運行並按照我認為您想要的去做。 我總是在任何作用域值之前$scope.data.query ，即$scope.data.query而不只是$scope.query 。 這有助於防止視圖嘗試在其作用域而不是控制器的作用域上使用值。

另外，由於您使用的是ng-model，因此我沒有看到將值從視圖傳遞到控制器的原因，因為控制器已經有了它。 這就是為什么ng-change現在僅調用searchItems()