AngularJS变量赋值与基于JSON值控制标签页显隐问题

It makes sense that your current ng-repeat approach isn't working—each iteration of ng-repeat creates its own child scope, so any flag you set inside that loop won't be accessible to the tab element outside. Here are two clean ways to fix this:

1. Use a Controller Function (Dynamic Check) #

Create a reusable function in your controller that checks if any item in res.objects has a region of 'US'. AngularJS will automatically re-evaluate this function whenever res.objects changes, so it works even if your data loads asynchronously.

Controller Code: #

angular.module('yourApp').controller('YourController', function($scope) {
  // Assume res is populated via API call or other means
  $scope.res = { objects: [] };

  $scope.shouldShowUSTab = function() {
    // Guard clause for when data isn't loaded yet
    if (!$scope.res || !$scope.res.objects || $scope.res.objects.length === 0) {
      return false;
    }
    // Check if at least one item has region 'US'
    return $scope.res.objects.some(item => item.region === 'US');
  };
});

Template Code: #

<!-- Your tab element -->
<tab ng-show="shouldShowUSTab()">
  <!-- Tab content here -->
</tab>

2. Precompute a Flag (Efficient for Static Data) #

If your res.objects data doesn't change after it's loaded, you can compute the flag once when the data is fetched. This avoids running the check on every digest cycle, which is slightly more efficient.

Controller Code: #

angular.module('yourApp').controller('YourController', function($scope, $http) {
  $scope.showUSTab = false;

  // Example API call to fetch data
  $http.get('/path/to/your/json').then(function(response) {
    $scope.res = response.data;
    // Compute the flag once data is loaded
    $scope.showUSTab = $scope.res.objects.some(item => item.region === 'US');
  });
});

Template Code: #

<tab ng-show="showUSTab">
  <!-- Tab content here -->
</tab>

Key Notes: #

• Make sure to use strict equality (===) when checking the region value to avoid unexpected type coercion issues.
• The some() array method is perfect here—it stops checking as soon as it finds the first matching item, which is efficient even for large datasets.
• For older browsers that don't support ES6 arrow functions, replace item => item.region === 'US' with function(item) { return item.region === 'US'; }.

内容的提问来源于stack exchange，提问作者Carlos M