时间戳

首页 > 解决方案 > 在按钮中自动添加 ng-hide

angularjs - 在按钮中自动添加 ng-hide

问题描述

<table>
<tr ng-repeat="response in customUserResponse">
  <td>
     <div class="buttons" align="center">
         <button ng-disabled="isReadOnly" class="btn actionBtn edit-disable"
                 ng-click="editResponse($index)"><i class="fa fa-edit"></i></button>
         <button ng-show="!response.Is_Global__c"
                 ng-model="response.Is_Global__c" ng- 
                 disabled="isReadOnly" class="btn actionBtn edit-disable"
                 ng-click="deleteQuestion($index)"> 
             <i class="fa fa-trash"></i></button>       
     </div>
  </td>
</tr> 
</table>

<table class="table" style="margin-top: 10px;">
     <tr>
         <td>
             <button ng-disabled="isReadOnly" class="btn actionBtn"
                     ng-click="addUserRow()">
                 <i class="fa fa-plus"></i></button> 
         </td>
      </tr>
</table>

    $scope.addUserRow = function () {
        var l = $scope.customUserResponse.length;
                
          if(l==0)
           {
             l = $scope.customUserQuestion.length;
                  
           }
                    
         var quest = {Question_Text__c:"", Response_Value__c:"", Status__c:"", Comments__c:"",  
         Is_Global__c:"false", Order__c:l};
                
        $scope.enabledEditResponse[l] = true;
        $scope.customUserResponse.push(quest);
        //var element = document.getElementByClass("deleteButton");
        //element.classList.remove("ng-hide");
        //angular.element(document.querySelector("#deleteButton")).removeClass("ng-hide");
        //$scope.showDeleteBtn = true;
        //$scope.$apply();
    };

$scope.submitQuestion = function() {
                var data = [];
                if($scope.customUserResponse.length >= $scope.customUserQuestion.length)
                    data = data.concat($scope.customUserResponse);
                else  {
                    data = data.concat($scope.customUserQuestion);
                    data = data.concat($scope.customUserResponse);
                }
                data.forEach(function(element) { element.Application_Id__c = $scope.appId; });
                var len = data.length;
                for(var i=0; i<len;i++){
                    data[i].Order__c = i+1;
                }
           ApplicationDataSource.saveFundingChecklistResponse(angular.toJson(data), function (result) {
                    if(result[0] !='{\"error\": true, \"result\": null}')
                    {
                        $scope.getResponse($scope.loadResponseInTable);
                                                                      
                        alert('Data saved Successfully');  
                        $scope.resetEnabledEditResponse();
                        //$scope.init();  
                    }
                    else
                    {
                        alert('Something went wrong. Data is not saved.'); 
                    }
                    $scope.$apply();
                });

            };

当 response.Is_Global__c == false 时，将显示删除按钮。当我单击加号按钮时，添加了一行，但删除按钮不显示。但是在保存两个按钮显示后。当我检查代码时，我看到 ng-hide 自动添加到类中，如果我手动删除 ng-hide 类，则显示按钮。

标签： angularjsbuttonng-showng-hide

解决方案

ng-hide当ng-show表达式计算为假值时添加类：这意味着在保存操作之后，此表达式变为false：

!response.Is_Global__c

通过在元素上移除或添加 .ng-hide CSS 类来显示或隐藏元素。

https://docs.angularjs.org/api/ng/directive/ngShow

推荐阅读