Einmalige Schaltfläche für ng-show dann ng-hide

Question

Ich habe Text, auf den ich klicke, um Informationen anzuzeigen, und diese Informationen ausblenden möchte, wenn erneut darauf geklickt wird. Derzeit zeigt es, versteckt sich aber nicht.

Mein Code:

<td ng-click="format(x.Recipient)" ng-show="x.Recipient.Name"> 
    <a> 
     {{x.Recipient.Name}} 
    </a> 
    </td> 
    <td ng-hide="x.Recipient.Name"> 
     {{x.Recipient}} 
    </td> 

Irgendwelche Vorschläge? Thanks :)

Follow-up:

gefragt wurde mein Controller schreiben:

angular.module('app') 
     .controller('QueryCtrl', ['$scope', 'dbCall', 'uuid', '$http', '$cookies', 
     function($scope, dbCall, uuid, $http, $cookies) { 

      $scope.results = []; 
      $scope.error = false; 
      $scope.formatted = ''; 
      $scope.LOCATION = ''; 
      $scope.processed = false; 
      $scope.delivered = false; 
      $scope.processedInfo = {}; 
      $cookies.put("ptLastPage", "/query"); 
      $scope.successCall = false; 

      $scope.format = function(recipient) { 
      $scope.formatted = recipient.Name + '\n' + recipient.Email_Address + 
       '\n' + recipient.Job_Title + 
       '\n' + recipient.Department + '\n' + recipient.Office; 
      }; 

      $scope.toRun = function(err, data) { 
      if (err) { 
       //console.log(err, err.stack); 
       $scope.results = false; 
       $scope.error = 'Could not connect to database'; 
       $scope.$apply(); 
      } else { 
       //console.log(data); 
       if (data.Items.length > 0) { 
       if (data.Items.length > 1) { 
        data.Items.forEach(function(item) { 
        if (item.Action === 'Processed') { 
         $scope.processed = true; 
        } else if (item.Action === 'Delivered') { 
         $scope.delivered = true; 
        } 
        }); 
        data.Items.forEach(function(item) { 
        if ($scope.delivered) { 
         $scope.results.push(item); 
        } else if (item.Action === 'Processed') { 
         $scope.processedInfo = item; 
        } else { 
         $scope.results.push(item); 
        } 
        }); 
       } else { 
        $scope.results = data.Items[0]; 
       } 
       $scope.error = false; 
       } else { 
       $scope.results = false; 
       $scope.error = 'Tracking Number not found'; 
       } 
       $scope.formatted = ''; 
       $scope.location = ''; 
       $scope.$apply(); 
      } 
      }; 
      $scope.getData = function() { 
      $scope.results = []; 
      $scope.processed = false; 
      $scope.delivered = false; 
      //$scope.location = ''; 
      $scope.processedInfo = {}; 
      var params = { 
       'IndexName': 'TrackingNumber-index', 
       'KeyConditionExpression': 'TrackingNumber = :t_num', 
       'ExpressionAttributeValues': { 
       ':t_num': $scope.trackingNumber 
       }, 
       'ScanIndexForward': false 
      }; 
      return dbCall('query', params, $scope.toRun); 
      }; 

      $scope.postEmail = function(err, data) { 
      if (err) { 
       //console.log(err, err.stack); 
      } else { 
       $http.get('file.json').success(function(res) { 
       var toSend = { 
        'fromEmail': res.fromEmail, 
        'toAddresses': [$scope.processedInfo.Recipient.Email_Address], 
        'subject': res.subject, 
        'message': 'You have a Package.' + 
        '\n' + 
        '\n' + 'Tracking Number: ' + $scope.processedInfo.TrackingNumber + 
        '\n' + 'Location:' + $scope.LOCATION + 
        '\n' + 'Time: ' + new Date().toLocaleString() + 
        '\n' + 'Delivered by User: ' + $scope.USERNAME 
       }; 
       //console.log(toSend); 
       $scope.successCall = true; 
       $http.post(
        'email', 
        toSend); 
       $scope.getData(); 
       }); 
      } 
      }; 

      $scope.deliver = function() { 
      var params = { 
       Item: { 
       TrackingNumber: $scope.processedInfo.TrackingNumber, 
       LoggedByUser: $scope.USERNAME, 
       Id: '' + uuid(), 
       DateAndTime: new Date().toLocaleString(), 
       Action: 'Delivered', 
       Location: $scope.LOCATION, 
       Recipient: $scope.processedInfo.Recipient, 
       Notes: 'none' 
       } 
      }; 
      return dbCall('putItem', params, $scope.postEmail); 
      }; 
     } 
    ]); 

Answer 1

Sie eine andere Eigenschaft auf Recipient umschalten und binden Sie es an ng-hide. Ihr Click-Handler würde also einfach das neue Feld umschalten. Zum Beispiel:

<td ng-hide="x.Recipient.isVisible"> 
    {{x.Recipient}} 
</td> 

und dann würde Ihre Click-Handler einfach den Wert umschalten:

html

<td ng-click="format(x.Recipient);toggleIsVisible(x.Recipient)" ng-show="x.Recipient.isVisible"> 

JS

$scope.toggleIsVisible = function(recipient) { 
    recipient.isVisible = recipient.isVisible ? false : true; 
};