Automatically added ng-hide in a button

Question

<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();
                });

            };

When response.Is_Global__c == false, the delete button will show. When I clicked plus button one row is added but the delete button doesn't show. But after saving both button shows. When I inspect the code, I see ng-hide is automatically added in the class and if I remove manually the ng-hide class then the button shows.

Can you show the save action? – Bill P Jan 14 '20 at 09:51 — Bill P, Jan 14 '20 at 09:51
I gave the save action. – Md. Alauddin Jan 14 '20 at 10:54 — Md. Alauddin, Jan 14 '20 at 10:54

score 0 · Answer 1 · answered Jan 14 '20 at 11:11

0

ng-hide class is added when ng-show expression evaluates to a falsy value: This means that after the save action this expression becomes false:

!response.Is_Global__c

The element is shown or hidden by removing or adding the .ng-hide CSS class onto the element.

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

answered Jan 14 '20 at 11:11

Bill P

3,622
10
20
32

But why this condition is false "!response.Is_Global__c". When I pushed value, I set the default value of Is_Gl0bal__c = false. so ng-show expression is true this gives me the correct result after saving why not before saving. Is it a rendering problem? – Md. Alauddin Jan 15 '20 at 10:54
I can only assume, maybe `Is_Gl0bal__c` becomes undefined or something. We cannot help you more without a minimum reprodusable example – Bill P Jan 15 '20 at 11:02

Automatically added ng-hide in a button

1 Answers1