如何在angularjs中使用ui bootstrap选项卡的动态活动选项卡？

Question

我想使用内容动态活动选项卡中的角的js 我的代码是

<uib-tabset ng-if="pets_count > 0" class="petsTabs tab-animation"> 
    <div ng-repeat="(key, pet) in pets_list"> 
     <uib-tab heading="{{pet.pet_name}}" active="{{pet.pet_id == activePet}}"> 
      <div class="petsTabsContent" > 
       <h4> 
        {{pet.pet_name}} 
        <small> 
         Boarding Dates: {{ pet.start_date | date : 'MMMM d, y'}} to {{ pet.end_date | date : 'MMMM d, y'}} 
        </small> 
       </h4> 
      </div> 
     </uib-tab> 
    </div> 
</uib-tabset> 

我有两个变量pet.pet_id，activePet在基座这些变量我必须有源标签。 但它不工作我提前 该控制器

$scope.show_pet_function = function() { 
    var pet_id; 
    var action; 
    pet_id = parseInt($('.pet_view_option').attr('data-pet_id')); 
    action = $('.pet_view_option').attr('data-action'); 
    petowner_user_id = parseInt($('.pet_view_option').attr('data-pet-owner')); 
    var details = $scope.hidePetData; 
    $http.post(CONFIG.APIURL + 'Pets/changePetHideStatus/', {pet_id: pet_id, action: action}) 
      .then(function (response) { 
       if (response.data.action == 'show_pet') { 
        promise = petlistFunction(petowner_user_id).then(function (response) { 
         $scope.activePet = pet_id; 
         angular.extend($scope.pets_list, response.data['pets_list']); 
        }); 
        toastr.success(response.data.message); 
       } else if (response.data.action == 'hide_pet') { 
        promise = petlistFunction(petowner_user_id).then(function (response) { 
         $scope.activePet = pet_id; 
         angular.extend($scope.pets_list, response.data['pets_list']); 
        }); 
       } 
      }); 
} 

这是响应了pet_list对象类型数组

Answer 1

我觉得可能是有$范围的问题是新的角度JS 感谢绑定，因为您正在使用可执行的函数提取数据。 因此请在$ http响应之后放置$scope.$apply()。 对于引用添加像这样

angular.extend($scope.pets_list, response.data['pets_list']); 
$scope.$apply();