2013-06-11 13 views
9

में परिवर्तनीय मान के आधार पर एनजी-छुपा बदलना मैं angular.js के लिए एक नया हूँ और विरासत कोड प्राप्त किया है। एक डेटासेट (ग्राहक प्रकार) है जो ng-repeat का उपयोग करके प्रदर्शित करता है। 3 टेबल पंक्तियां हैं जिन्हें मैं केवल तभी दिखाना चाहता हूं जब ग्राहक टाइप टाइप प्रकार "नया" के बराबर हो। इन 3 पंक्तियों में सभी को उनके संबंधित टैग में "ng-hide =" है। मैं angular.js में यह कैसे करूँ? मैं जो निर्देश देखता हूं वह पूरे स्क्रीन डिस्प्ले पर लागू होता है, इसलिए मुझे यकीन नहीं है कि डिस्प्ले के केवल हिस्से के लिए स्कोप वैरिएबल को कैसे बदला जाए। यहाँ एचटीएमएल है:angular.js

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

किसी भी मदद की बहुत सराहना की जाएगी:

<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> 

और यहाँ मौजूदा निर्देशों हैं। मैं इसके चारों ओर अपने सिर को लपेटने की कोशिश कर रहा हूं लेकिन कुछ बस कनेक्ट नहीं हो रहा है।

उत्तर

26

बस उस चर के आधार पर दिखा रहा है/छुपा रहा है?
मुझे क्या करना होगा:

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

हाँ, मैं रास्ता है कि overthinking था। मेरी मूर्खता एग्रीको को शामिल करने के लिए धन्यवाद। अच्छी माप के लिए – tjfo

+2

और समस्याओं से बचने के लिए, डबल बराबर के बजाय ट्रिपल बराबर का उपयोग करने पर विचार करें। अर्थात। ng-show = "customerType.type === 'new'", क्योंकि == सबकुछ समानता का मूल्यांकन करने से पहले परिवर्तित किया गया है। विपक्ष में, ट्रिपल बराबर के साथ, समानता का परीक्षण किया जाता है, मूल्यांकन के पहले कुछ भी परिवर्तित नहीं होता है। पूर्व अप्रत्याशित परिणाम का कारण बन सकता है। यहां एक अच्छा ग्राफ दिखा रहा है: http://dorey.github.io/JavaScript-Equality-Table/ –