如何在 AngularJS 中隐藏 ng-repeat 中的按钮

Question

我的观点：

<div class="col-sm-4 col-xs-4" ng-repeat="(id, object) in objects">
    <button type="primary" 
        ng-click="add(id)"  
        ng-hide="id.plz" style="color: cyan;">Add</button>
</div>

控制器 JavaScript：

$scope.add = function(id){
   // some function;
   $scope.objects[id].plz = true;
}

知道为什么它不起作用吗？

Answer 1

<div class="col-sm-4 col-xs-4" ng-repeat="(id, object) in objects">
<button type="primary" ng-hide="objects[id].plz" ng-click="add(id)"   style="color: cyan;" >Add</button>
<div>

ng-hide="id.plz" id 是索引，因此没有id.plz

在此处了解有关ng-hide和替代方案的更多信息

Answer 2

如果你想

有条件地隐藏你的按钮在ng-repeat中，请使用ng-hide，ng-show(如果你有可能隐藏并在以后显示它(或ng-if(如果它是一次性隐藏按钮(。

ng-hide 采用布尔值并相应地显示/显示。在你的情况下，你的ng-hide总是被证明是真的，所以你无法隐藏。只需在ng-hide中写下所需的条件即可隐藏按钮

Answer 3

单击

按钮时隐藏按钮，就像在小提琴中一样：

视图

<div ng-controller="MyCtrl">
    <div ng-repeat="user in data">
      {{ user.name}}
      <button ng-hide="hide[$index]" ng-click="add();hide[$index] = true;">
        Add
      </button>
    </div>
</div>

AngularJS应用程序

var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope) {
    $scope.add = function () {
      console.log('add');
    }
    $scope.data = [{
      name: 'frank'
    },{
      name: 'peter'
    },{
      name: 'melanie'
    },{
      name: 'sven'
    },{
      name: 'basti'
    },{
      name: 'edjuh'
    }];
});