Câu hỏi Thay đổi ng-hide dựa trên giá trị biến trong angular.js


Tôi là một newb để angular.js và đã thừa kế mã. Có một tập dữ liệu (customerType) hiển thị bằng cách sử dụng ng-repeat. Có 3 hàng bảng mà tôi muốn hiển thị chỉ khi customerType.type bằng "mới". Tất cả 3 hàng này đều có "ng-hide =" trong các thẻ tương ứng của chúng bên dưới. Làm cách nào để làm điều này trong angular.js? Các chỉ thị mà tôi thấy tất cả dường như áp dụng cho toàn bộ màn hình hiển thị vì vậy tôi không chắc chắn làm thế nào để thay đổi một biến phạm vi cho chỉ một phần của màn hình. Đây là 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>

và đây là các chỉ thị hiện tại:

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

Mọi sự trợ giúp sẽ rất được trân trọng. Tôi đang cố gắng để quấn đầu của tôi xung quanh này, nhưng một cái gì đó chỉ là không hoàn toàn kết nối.


9
2018-06-11 16:09


gốc




Các câu trả lời:


Chỉ hiển thị / ẩn dựa trên biến đó?
Tôi sẽ làm:

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

27
2018-06-11 16:51



Yep, tôi đã WAY overthinking đó. Cảm ơn bạn đã thưởng thức agreco ngu ngốc của tôi. - tjfo
để đo lường tốt và để tránh các vấn đề, hãy xem xét sử dụng ba bằng thay vì bằng gấp đôi. I E. ng-show = "customerType.type === 'new'", bởi vì với == mọi thứ được nhập chuyển đổi trước khi đánh giá bình đẳng. Đối lập, với ba bằng, bình đẳng được kiểm tra như là, không có gì được chuyển đổi trước khi được đánh giá. Trước đây có thể dẫn đến kết quả bất ngờ. Đây là một biểu đồ đẹp minh họa điều này: dorey.github.io/JavaScript-Equality-Table - António Sérgio Simões