9

I am a newb to angular.js and have inherited code. There is a dataset (customerType) that displays using ng-repeat. There are 3 table rows that I want to display only if the customerType.type is equal to "new". These 3 rows all have "ng-hide=" in their respective tags below. How do I do this in angular.js? The directives I see all seem to apply to the entire screen display so I am not sure how to change a scope variable for only part of the display. Here's the 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>

and here are the current directives:

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

Any help would be greatly appreciated. I'm trying to wrap my head around this but something just isn't quite connecting.

1 Answer 1

28

Just showing / hiding based on that variable?
I would do:

ng-show="customerType.type == 'new'"
Sign up to request clarification or add additional context in comments.

2 Comments

Yep, I was WAY overthinking that. Thank you for indulging my stupidity agreco.
for good measure and to avoid problems, consider using triple equals instead of double equals. I.e. ng-show="customerType.type === 'new'", because with == everything is type converted before evaluating equality. In opposition, with triple equals, equality is tested as is, nothing is converted before being evaluated. The former can lead to unexpected results. Here's a nice graph illustrating this: dorey.github.io/JavaScript-Equality-Table

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.