更新

Question

我不知道如何隐藏ng-repeat中的进度条。我想我必须使用ng-hide，但也许它不起作用，因为我有很多次迭代，div具有ng-hide的相同ID。我想在用户点击按钮时显示div。

我该怎么做？谢谢

丹尼尔。

编辑。说实话，我没有按照上面提到的那样做，因为我期待AngularJS的其他行为，但我现在已经写了我想要的Plunker并且它有效。

我想要的是（简化）两列：一列带按钮，另一列带进度条。如果我在该行的按钮上单击，则会显示其进度条。我认为AngujarJS会显示所有进度条，因为所有条形都有相同的标签（例如，ng-hide =＆＃34; bar＆＃34;），因此我打开了这个问题。如果有人需要代码，您可以在Plunker http://plnkr.co/edit/S5b0Dk0Tz7eZCkkJw95j?p=preview

上看到它

看看AngularJS是如何工作的，现在我想知道如果我在id为3的迭代按钮上clic，如何隐藏id为5的迭代。我怎么能这样做？

谢谢！

Answer 1

你可以把一个属性isVisible并使用ngIf或ngShow来显示和隐藏div这里是一个例子。

HTML：

<div
  ng-app="app"
  class="main-content"
  ng-controller="MainCtrl as app"
>
  <header class="header">
    <button
      class="button"
      ng-click="app.showAll()"
    >
      Show all
    </button>
    <button
      class="button"
      ng-click="app.hideOdds()"
    >
      Hide odds
    </button>
  </header>
  <div class="elements-container">
    <p
      ng-if="thing.isVisible"
      ng-class="{
        even: thing.even,
        odd: thing.odd
      }"
      ng-repeat="thing in app.stuff"
    >
      {{thing.content}}
    </p>
  </div>
</div>

使用Javascript：

(function (angular) {
  var
    app  = angular.module('app',[]),
    MainCtrl = function ($scope) {
      var
        len,
        thing,
        i   = 100,
        app = this;
      app.stuff = [];
      app.showAll = function () {
        len = app.stuff.length - 1;
        for (; len >= 0; len -= 1) {
          app.stuff[len].isVisible = true;
        }
      };
      app.hideOdds = function () {
        len = app.stuff.length - 1;
        for (; len >= 0; len -= 1) {
          if ((app.stuff[len].content % 2) !== 0) {
            app.stuff[len].isVisible = false;
          }
        }
      };
      for (; i >= 0; i -= 1) {
        if((i % 2) === 0){
          thing = {
            even: true,
            content: i,
            isVisible: true
          };
        } else {
          thing = {
            odd: true,
            content: i,
            isVisible: false
          };
        }
        app.stuff.push(thing);
      }
    };
  app.controller("MainCtrl", MainCtrl);
}(this.angular));

希望这里的帮助是live demo。

更新

如果我理解你想要在单击按钮时出现所有进度条，如果是这样你只需要在控制器内的更高元素中声明bar变量也是最佳实践来初始化变量控制器而不是ngInit 这是一个fork of your plunk，可以做到这一点。

更新2：

好的，对不起，如果不够清楚，这里有一个更详细的答案：在HTML文件中，body标签的前两行是这样的：

<body ng-app="app" ng-init="vari = [{_id: 2}, {_id: 5}]">
  <div ng-controller="ExampleCtrl" ng-repeat="data in vari">

我将它们改为：

<body ng-app="app" ng-controller="ExampleCtrl">
  <div ng-repeat="data in vari">

在js文件中我刚添加了这一行：

$scope.vari = [{_id: 2}, {_id: 5}];

所以基本上我删除了ngInit指令并将初始化移到了控制器，因为我们需要在ngRepeat范围之外初始化$scope.bar变量和控制器。

Angular JS。在ng-repeat中隐藏div

1 个答案:

HTML：

使用Javascript：

更新

更新2：