如何在angularjs中使用ui bootstrap选项卡的动态活动选项卡?
我想使用内容动态活动选项卡中的角的js 我的代码是如何在angularjs中使用ui bootstrap选项卡的动态活动选项卡?
<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']);
});
}
});
}
我觉得可能是有$范围的问题是新的角度JS 感谢绑定,因为您正在使用可执行的函数提取数据。 因此请在$ http响应之后放置$scope.$apply()
。 对于引用添加像这样
angular.extend($scope.pets_list, response.data['pets_list']);
$scope.$apply();
angular.extend正在工作,不需要添加$范围。应用 –
您的数据是在查看文件中加载的吗? –
不,我从控制器中获取数据的位置 –
发表您的控制器 –
@sachilaranawaka更新 –
你可以请张贴'$ scope.pets_list'阵列也 –