1. 首頁
  2. 問答
  3. 無法使用ng-if使用ng-repeat

無法使用ng-if使用ng-repeat

2014-05-01 26 views
1

我試圖使用ng-if在ng-repeat內部但似乎不能正常工作。無法使用ng-if使用ng-repeat

我在StackOverflow中提到了幾個論壇鏈接，但它並沒有幫助我。

我採用了棱角分明的版本1.3.0

HTML

<!DOCTYPE html> 
<html ng-app="myModule"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <meta name="description" content=""> 
     <meta name="author" content=""> 
     <script src="/js/lib/angular-1.3.0/angular.js"></script> 
     <script src="/js/lib/controllers/ifRepeatController.js"></script> 
    </head> 
    <body> 

    <div ng-repeat = "data in comments"> 
     <div ng-if="data.type == 'hootsslllll' "> 
      //differnt template with hoot data 
     </div> 
     <div ng-if="data.type == 'story' "> 
      //differnt template with story data 
     </div> 
     <div ng-if="data.type == 'article' "> 
      //differnt template with article data 
     </div> 
    </div> 
    </body> 
</html>

控制器

var myIfRepeat = angular.module('myIfRepeat',[]); 


myIfRepeat.controller('IfRepeatController', function ($scope,$http) { 

    $scope.comments = [ 
      {"_id":"1", 
       "post_id":"1", 
       "user_id":"UserId1", 
       "type":"hoot"}, 
      {"_id":"2", 
       "post_id":"2", 
       "user_id":"UserId2", 
       "type":"story"},   
      {"_id":"3", 
       "post_id":"3", 
       "user_id":"UserId3", 
       "type":"article"} 
      ]; 

});

按照第一個條件，第一個行應該不會被顯示（下面查找屏幕截圖以獲取更多參考信息），但該行正在顯示。

參考鏈接：Using ng-if inside ng-repeat?

Ng-If

現在我加入了控制器的建議股利，但我面臨同樣的問題

下面我給出了參考截圖。請幫助我如何解決這個問題，請讓我知道如果進一步澄清。

New screenshot with controller

上工作模型下方設置截圖使用角1.3版本。如果我們使用的角度1.0.2的NF-如果將無法正常工作（以下提供的截圖）

Working model screenshot

截屏角版本1.0.2

enter image description here

來源

2014-05-01 Arun

+1

保重：'ngIf'產生其應有的範圍。https://groups.google.com/forum/#!msg/angular/kPRzdcrIzNw/cNaJdguCNeYJ – Mik378

+0

@ Mik378抱歉，無法清楚地理解 – Arun

+2

您是否嘗試使用'ng-show'而不是'ngIf'？ – Mik378

回答

4

我沒有遇到這個問題。優化了你的代碼放入一個fiddle

<div ng-app ng-controller="IfRepeatController"> 
    <div ng-repeat="data in comments"> 
     <div ng-if="data.type == 'hootsslllll' ">type={{data.type}}//differnt template with hoot data</div> 
     <div ng-if="data.type == 'story' ">type={{data.type}}//differnt template with story data</div> 
     <div ng-if="data.type == 'article' ">type={{data.type}}//differnt template with article data</div> 
    </div> 
</div> 

function IfRepeatController($scope) { 
    $scope.comments = [{ 
     "_id": "1", 
      "post_id": "1", 
      "user_id": "UserId1", 
      "type": "hoot" 
    }, { 
     "_id": "2", 
      "post_id": "2", 
      "user_id": "UserId2", 
      "type": "story" 
    }, { 
     "_id": "3", 
      "post_id": "3", 
      "user_id": "UserId3", 
      "type": "article" 
    }]; 
}

注：參考角1.3.0這裏：https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.min.js

來源

2014-05-01 18:18:21 Brocco

+0

對不起，我不明白它是如何爲你工作的。在我之前的代碼中，我錯過了控制器，之後我添加了控制器，然後我嘗試了，但是我面臨同樣的問題。附上截圖供參考。請讓我知道更多信息。 – Arun

+0

對不起，我添加了錯誤的模塊名稱，它工作正常。 – Arun

2

你缺少ng-controller：

<body ng-controller="IfRepeatController">

來源

2014-05-01 18:20:24

+0

建議我添加了控制器，但仍然面臨同樣的問題。在上面的帖子中，我附上了截圖以供參考。 – Arun

+0

對不起，我添加了錯誤的模塊名稱，它工作正常附加截圖作爲參考 – Arun

+0

很高興這解決了你的問題。 –

0

我有一個類似的問題。我無法得到ng - 如果要正常工作。讓它工作的唯一方法是評估ng-if到not運算符（ng-if =「！variableValue」）。這是一個AngularJS版本問題？

來源

2014-09-29 20:59:34 user1789573

0

這個不在AngularJs版本問題，如果variableValue有布爾值，它會正常工作。

示例代碼：

$scope.variableValue = true; in Controller 

"<"div ng-if="!variableValue" ">"Don't show content"<"/div">"// This DIV doesn't show the content 
"<"div ng-if="variableValue" ">"show content"<"/div">" // This DIV will show the content

來源

2014-09-30 01:43:22 Karthik

相關問題

 相關問題