在ng-repeat中显示/隐藏项目

时间:2016-03-09 06:07:33

标签: javascript jquery angularjs

QUESTION

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

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

有没有办法为每个项目动态生成布尔值?我真的不想在每个对象中添加一个show项目来调用。一定有更好的方法。  编辑:以下是一个更好的模板用作示例: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,
  }];
});

2 个答案:

答案 0 :(得分:1)

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

在你的html传递中

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

在js中

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

答案 1 :(得分:0)

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