Ändern von ng-ausblenden basierend auf Variablenwert in angular.js

Question

Ich bin ein newb zu angular.js und habe Code geerbt. Es gibt ein Dataset (CustomerType), das mit ng-repeat angezeigt wird. Es gibt 3 Tabellenzeilen, die nur angezeigt werden sollen, wenn der Typ customerType.type gleich "new" ist. Diese 3 Zeilen haben alle "ng-hide =" in ihren jeweiligen Tags unten. Wie mache ich das in angular.js? Die Direktiven, die ich sehe, scheinen alle auf die gesamte Bildschirmanzeige anzuwenden, so dass ich nicht sicher bin, wie man eine Bereichsvariable nur für einen Teil der Anzeige ändern kann. Hier ist der html:

<div ng-repeat="customerType in customerTypes" class="span6"> 
    <table class="table table-bordered table-striped"> 
    <thead> 
     <tr> 
     <th colspan="3"> 
      <div class="span11 centered-text"> 
       {{customerType.title}} 
      </div> 
      <div class="span1"> 
       <a href="javascript:void(0);" ng-click="pullDetail(customerType.type, customerType.clients)" title="Details"><i class="icon-list-alt"></i></a> 
      </div> 
     </th> 
     </tr> 
     <tr> 
     <th></th> 
     <th> 
      <div class="centered-text"> 
      Month Selected 
      </div> 
     </th> 
     <th> 
      <div class="centered-text"> 
      YTD 
      </div> 
     </th> 
     </tr>        
    </thead> 
    <tbody> 
     <tr> 
     <td>Revenue</td> 
     <td>{{customerType.month.revenue}}</td> 
     <td>{{customerType.ytd.revenue}}</td> 
     </tr> 
     <tr> 
     <td>Gross Profit</td> 
     <td>{{customerType.month.gross}}</td> 
     <td>{{customerType.ytd.gross}}</td> 
     </tr> 
     <tr> 
     <td># of Customers</td> 
     <td>{{customerType.month.customers}}</td> 
     <td>{{customerType.ytd.customers}}</td> 
     </tr> 
     <tr> 
     <td>Avg GP per Customer</td> 
     <td>{{customerType.month.avg_gp}}</td> 
     <td>{{customerType.ytd.avg_gp}}</td> 
     </tr> 
     <tr> 
     <td># of Jobs</td> 
     <td>{{customerType.month.jobs}}</td> 
     <td>{{customerType.ytd.jobs}}</td> 
     </tr> 
     <tr ng-hide=> 
     <td>First Time Client - Revenue</td> 
     <td>{{customerType.month.ftc_revenue}}</td> 
     <td>N/A</td> 
     </tr> 
     <tr ng-hide=> 
     <td>First Time Client - Gross Profit</td> 
     <td>{{customerType.month.ftc_gross}}</td> 
     <td>N/A</td> 
     </tr> 
     <tr ng-hide=> 
     <td>First Time Client - # of Customers</td> 
     <td>{{customerType.month.ftc_customers}}</td> 
     <td>-----</td> 
     </tr> 
     <tr ng-hide=> 
     <td>First Time Client - # of Jobs</td> 
     <td>{{customerType.month.ftc_jobs}}</td> 
     <td>-----</td> 
     </tr> 
     <tr> 
     <td>% on Contract</td> 
     <td>{{customerType.month.contract}}</td> 
     <td>{{customerType.ytd.contract}}</td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

und hier sind die aktuellen Richtlinien:

var ReportController = function($scope, $http){ 
$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded"; 

$scope.filter = true; 
$scope.report = false; 
$scope.detail = false; 

$scope.customerTypes = []; 
$scope.detail_report = []; 
$scope.companies = companies; 
$scope.nsperiods = nsperiods; 
$scope.users = users; 

$scope.pullReport = function(sync){ 
    if(sync){ 
     var xsr = {request: 'report', company_no: $scope.company, nsperiod: $scope.nsperiod, users_no: $scope.user}; 
     $('form button').button('loading'); 
     $http({ 
      method: 'POST', 
      headers: {'Content-Type': 'application/x-www-form-urlencoded'}, 
      transformRequest: function(obj) { 
       var str = []; 
       for(var p in obj) 
       str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); 
       return str.join("&"); 
      }, 
      data: xsr 
     }).success(function(response){ 
      $scope.filter = false; 
      $scope.report = true; 
      $scope.detail = false; 
      $('form button').button('reset'); 
      $scope.customerTypes = response; 
     }).error(function(error){ 
      $('form button').button('reset'); 
      return; 
     }); 
    }else{ 
     $scope.filter = false; 
     $scope.report = true; 
     $scope.detail = false; 
    } 
} 

$scope.backToFilters = function(){ 
    $scope.filter = true; 
    $scope.report = false; 
    $scope.detail = false; 
} 

$scope.pullDetail = function(type, clients){ 
    var xsr = { 
     request: 'detail', 
     type: type, 
     company_no: $scope.company, 
     nsperiod: $scope.nsperiod, 
     users_no: $scope.user 
    }; 
    $http({ 
     method: 'POST', 
     headers: {'Content-Type': 'application/x-www-form-urlencoded'}, 
     transformRequest: function(obj) { 
      var str = []; 
      for(var p in obj) 
      str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); 
      return str.join("&"); 
     }, 
     data: xsr 
    }).success(function(response){ 
     $scope.filter = false; 
     $scope.report = false; 
     $scope.detail = true; 
     $scope.detail_report = response; 
    }).error(function(error){ 
     return; 
    });     
} 
}; 

Jede Hilfe wäre sehr geschätzt. Ich versuche, meinen Kopf darum zu wickeln, aber etwas verbindet mich einfach nicht.

Answer 1

Nur zeigen/verstecken basierend auf dieser Variablen?
ich tun würde:

ng-show="customerType.type == 'new'"