我有以下div
标记,其中包含下拉列表和轮播。每当我从下拉列表中选择时,我调用一个AngularJS控制器中的函数,该控制器使用http.golang在后端调用golang以生成要在轮播中显示的数据,并发送一个响应,该响应显示在轮播中但创建页面刷新。我只想再次加载div
,而不是要加载整个页面。我怎么能用AngularJS做到这一点?
HTML:
<div class="col-xs-11" style="width:750pt; height:180pt; margin-top:30px; ">
<div class="row " style="margin-left:75pt;">
<div class="dropdown">
<label class="text-center" style="margin-top:10pt;font-size:14pt;"> Deals on</label>
<button data-toggle="dropdown" class=" btn dropdown-toggle dropdown-menu-hover-color text-center" style="padding:0px 0px;background-color:white;" href="#"><label style="font-size:14pt; color: #191970;" >{{currentCategory}}</label> <b class="caret"></b></button>
<ul class="dropdown-menu submenu-hover-color dropdown-menu-scroll" style="margin:0;">
<li><a href="#" id="{{page.category_id}}" ng-click="changeCategory(page.category_id);" ng-repeat="page in dropdownCategoryList" ng-model="category_id">{{page.category_name}}</a></li>
</ul>
<div style="display: inline;" ng-hide="deals"> <label class="text-center" style="margin-top:10pt;font-size:14pt;color: #191970;;">No deals found, please select a different category. </label></div>
</div>
</div>
<div id ="carousel_category" class="carousel slide " ng-show ="deals">
<div class="carousel-inner text-center" style="margin-left:75px;">
<div class="item active">
<div class="carousel-width" ng-repeat="(key, value) in categoryList.slice(0, 5) track by $index">
<img ng-src= {{value.imageUrl}} alt="No Image"/>
<a href="#"><h6>{{value.productName}}</h6></a>
<b style="color:#990000;">{{value.price}}</b> <b style="color:green;">{{value.discount}}</b>
</div>
</div>
<div class="item" ng-repeat="page in category_products_pages">
<div class="carousel-width" ng-repeat="image in page">
<img ng-src= {{image.imageUrl}} alt="No Image" />
<a href="#"><h6>{{image.productName}}</h6></a>
<b style="color:#990000;">{{image.price}}</b> <b style="color:green;">{{image.discount}}</b>
</div>
</div>
</div> <!--End of carousel-inner-->
<a class="left carousel-control pull-left" href="#carousel_category" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control pull-right" href="#carousel_category" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div><!--End of carousel_cartegory-->
</div>
Angularjs :(代码在angularjs控制器内)
$scope.changeCategory = function(category_id) {
$http({
method : 'POST',
url : '/changeCategory',
data : {"category_id" : category_id},
headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
// set the headers so angular passing info as form data (not request payload)
}).success(function(data, status, headers, config) {
$scope.deals = true;
$scope.products = JSON.parse(JSON.stringify(data));
$scope.currentCategory = $scope.products.categoryInfo.category_name;
$scope.dropdownCategoryList = $scope.products.dropdownCategoryList;
$scope.categoryList = $scope.products.categoryList;
if($scope.categoryList == undefined) {
$scope.deals = false;
return;
}
currList = $scope.categoryList;
for(var i=0;i<currList.length;i++){
product_type = currList[i].product_type;
if (product_type != "Price_With_Discount") {
currList[i].price = "";
currList[i].discount = "Save Upto "+currList[i].discount + "%";
} else {
currList[i].price = "$" + currList[i].price;
currList[i].discount = "(Save "+currList[i].discount+"%)"
}
}
//category_data
var category_products_page = [];
var category_products_pages = [];
var count_1 = 5;
$scope.category_products_pages = category_products_pages;
for(var j=5;j<$scope.categoryList.length;j++){
if(count_1 > 1){
category_products_page.push($scope.categoryList[j]);
count_1--;
if($scope.categoryList.length === j+1){
category_products_pages.push(category_products_page);
//return;
break;
}
}else{
category_products_page.push($scope.categoryList[j]);
category_products_pages.push(category_products_page);
category_products_page = [];
count_1 = 5;
}
}
}).error(function(data, status, headers, config) {
$scope.status = status;
$window.alert("error")
});
}
});