Ng-if布尔条件问题

时间:2016-06-29 06:13:34

标签: angularjs

我尝试显示isNotRegistered == true按钮并隐藏嵌套链接。如果它是false隐藏按钮并显示链接。 为什么在我的plunker所有链接都隐藏? http://plnkr.co/edit/XpwWyYKpbeUASUJpnDa0?p=preview

3 个答案:

答案 0 :(得分:2)

我认为这些名字会变成链接......检查出来......如果我误解了它,请纠正我。



angular.module("App", [])
  .controller("Ctrl", function($scope){
    $scope.list = [
      {item: '1',
        isNotRegistered: false,
        children: [ 
        {name: '11'},
        {name: '12'}
        ]
      },
      {item: '2',
        isNotRegistered: true,
        children: [ 
        {name: '21'},
        {name: '22'}
        ]
      }
      ];
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App" ng-controller="Ctrl">
    <ul>
      <li ng-repeat="item in list">{{item.item}}
        <ul>
          <li ng-if="item.isNotRegistered" ng-repeat="child in item.children">{{child.name}}</li>
          <button ng-if="!item.isNotRegistered">Click</button>
        </ul>
      </li>
    </ul>
  </div>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

替换此

 <li ng-repeat="item in list">{{item.item}}
        <ul>
          <li ng-if="!item.isNotRegistered" ng-repeat="item in item.children">{{item.name}}</li>
          <button ng-if="item.isNotRegistered">Click</button>
        </ul>
      </li>

来自这个

 <li ng-repeat="item in list">{{item.item}}
        <ul>
          <li ng-if="!item.isNotRegistered" ng-repeat="newItems in item.children">{{newItems.name}}</li>
          <button ng-if="item.isNotRegistered">Click</button>
        </ul>
      </li>

之前的问题是,重复您为项目分配值。所以有一个混乱

答案 2 :(得分:0)

请改用ng-show,避免在不同级别使用相同的变量名。我将第一个li项目更改为Pitem。以下是适合你的。 一切顺利

<!DOCTYPE html>
<html ng-app="App">

  <head>
    <script data-require="angularjs@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="Ctrl">
    <ul>
      <li ng-repeat="Pitem in list">{{Pitem.item}}
        <ul>

          <li ng-show="!Pitem.isNotRegistered" ng-repeat="item in Pitem.children">{{item.name}}</li>

          <button ng-show="Pitem.isNotRegistered">Click</button>
        </ul>
      </li>
    </ul>
  </body>

</html>

如果这解决了您的问题,请标记为答案