使用angularjs重新加载div标签而不是页面重新加载

时间:2014-03-21 00:22:00

标签: html angularjs

我有以下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>&nbsp;
            <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>&nbsp;<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">&nbsp;&nbsp;<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")
        });
    }
});

0 个答案:

没有答案