2014-09-25 5 views
0

검색 쿼리가 어떤 문자열과도 일치하지 않는다면 제품이 없다는 것을 나타내는이 코드가 있습니다. 나는 지금 나의 텍스트가 보이지 않는 이상한 버그를 가지고있다. html 및 css (콘솔)에서 사용할 수 있으며 click()이 바인딩 된 요소를 클릭하거나 CSS (콘솔)에서 색상을 편집 한 후에 작동합니다. 아무도이게 뭔지 알 수 있고 어떻게 고칠 수 있었는지, 엄청난 노력을했지만 아무것도 도움이되지 않을까?텍스트가 각도 JS에 표시되지 않음

나는 이런 식으로 추가하고 ->

<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(); 

답변

0

시도해보십시오. plnkr. 나는 그것을 달리고 당신이 원한다고 생각하는 것을하고있다. 항상 $scope.query 대신에 어떤 범위 값 즉 $scope.data.query을 붙입니다. 이렇게하면 뷰가 컨트롤러 범위가 아닌 범위에서 값을 사용하지 못하게됩니다.

또한 ng 모델을 사용하고 있기 때문에 뷰에서 값을 컨트롤러로 전달하는 이유가 컨트롤러에 이미있는 것처럼 보이지 않았습니다. 이것이 ng-change가 현재 전화 만하는 이유입니다. searchItems()

+0

대단히 감사합니다! 나는 그것을 조사 할 것이다. 훌륭한 팁. 다시 타이;) –

+0

나는 그것을 해치려 고 노력했지만 성공적으로 할 수 없었다. ... : s –

+0

안녕하세요. 나는 내 문제를 해결했다고 생각하지만 왜 그것이 내 문제에 영향을 미치는지 모르겠다. 암호. 너 알고 있니? 위의 편집을 추가했습니다. –

관련 문제