无法使用if-有重复(Unable to use ng-if with ng-repeat)

2019-10-20 01:20发布

我试图用NG-如果里面NG-重复,但它似乎NG-如果不能正常工作。

我提到的情侣论坛链接在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"}
          ];

});

按照第一个条件,第一个行应该不会被显示出来(下面找到更多的参考截图),然而是越来越显示线。

引用链接: 使用内,如果重复?

现在我加入作为建议的股利控制器,但是我面临同样的问题

下面我给出了参考截图。 请帮我如何解决这个问题,请让我知道在进一步澄清的情况下。

所使用的角1.3版本的工作模式下面提供的截图。 如果我们使用的角度1.0.2的NF-如果将无法正常工作(以下提供的截图)

截屏的角度版本1.0.2

Answer 1:

我不是有这个工作的问题。 优化了你的代码放入一个小提琴

<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



Answer 2:

这是因为丢失ng-controller

<body ng-controller="IfRepeatController">


Answer 3:

我有一个类似的问题。 我不能让NG-如果能够正常工作。 要得到它的工作的唯一办法是评价NG-如果在没有运营商(NG-IF =“!variableValue”)。 这是一个AngularJS版本问题?



Answer 4:

这不是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


文章来源: Unable to use ng-if with ng-repeat