如何在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'
    }];
});