【问题标题】:Show/Hide items in an ng-repeat在 ng-repeat 中显示/隐藏项目
【发布时间】:2016-03-10 12:55:11
【问题描述】:

QUESTION

使用上述问题的代码,我的问题是有一种干净的方法可以删除每个对象中的所有布尔值并获得角度来了解是否显示/隐藏每个单独的重复对象。

我有一个项目表,如果您单击一个按钮,它将翻转一个布尔值并显示它自己,但它会对表中的每个项目执行此操作,而不仅仅是单个项目,因为它们都指向同一个布尔值。

有没有办法为每个项目动态生成一个布尔值?我真的不想在每个对象中添加一个显示项目来调用。一定有更好的方法。 编辑:这是一个更好的模板,可以用作示例:JSFiddle

HTML

<body ng-app="task" ng-controller="repeat">
 <table class="table table-striped table-hover">
  <thead>
    <tr>
      <td>Account</td>
      <td>Details</td>
      <td>Secret</td>
      <td>Action</td>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="x in accounts">
      <td>{{x.account}}</td>
      <td>{{x.details}}</td>
      <td><span>{{x.secret}}</span></td>
      <td>
         <button type="button" class="btn btn-default">Show Secret</button>
      </td>
     </tr>
   </tbody>
 </table>
</body>

JavaScript

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

app.controller('repeat', function($scope) {
  $scope.accounts = [{
    account: "account 01",
    details: "lorum ipsum",
    secret: 0101101,
  }, {
    account: "account 02",
    details: "lorum ipsum",
    secret: 0101101,
  }, {
    account: "account 03",
    details: "lorum ipsum",
    secret: 0101101,
  }, {
    account: "account 04",
    details: "lorum ipsum",
    secret: 0101101,
  }];
});

【问题讨论】:

    标签: javascript jquery angularjs


    【解决方案1】:

    在你提到的问题的上下文中尝试这个

    在您的 html 通行证中

       <button ng-click="toggle(x.$index)">Hide</button>
    

    在js中

      $scope.toggle = function(index){
      $scope.array[index].show = !$scope.array[index].show;
      };
    

    【讨论】:

    • 这没有回答我的问题,它使用了显示布尔值。这就是我要删除的内容,不必在每个对象中都使用布尔值,这样我就可以切换哪个对象可以出现或不出现
    • 再次,使用 x.show,我希望能够完全删除 show 而不必在每个对象中都有它。
    • 你可以为它制作 JS Fiddle 吗?
    • jsfiddle.net/13soaet1/1 我似乎无法让 Angular 在 jsfiddle 中工作。
    【解决方案2】:

    在按钮上,调用 angularjs 函数设置布尔值,然后使用ng-show/ng-hide 切换视图。

    【讨论】:

    • 是的,这就是我想要的,但我想知道一个简单的解决方案来动态创建所有这些布尔值,而无需将它们添加到每个对象并且必须存储它。
    • 请分享有效的 jsfiddle 代码。这样我可以帮助你
    • 我已经添加了上面的例子,
    猜你喜欢
    • 1970-01-01
    • 2014-10-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-11-09
    • 1970-01-01
    相关资源
    最近更新 更多