如何在角度中使用$ http服务添加部分页面功能?

时间:2015-07-13 14:29:12

标签: javascript jquery angularjs angularjs-scope

我想在使用角度中的$ http服务成功加载部分页面后执行操作。

操作是根据范围值选中复选框。

请有人帮助我。

源代码:    这是实际的代码。

$http({
        url : './resources/staticPages/custom-object-filter.html',
        method : "GET"
    }).success(function(data, status) {         
            $scope.data = data;             
            jQuery("objectViewPartial").html($compile($scope.data)($scope));
            //console.log($scope.selected);
          if(angular.equals($scope.selected, "ShowActivatedObjects")) {
                 $("#ShowActivatedObjects").attr('checked','true');
          } else {
                $("#ShowActivatedObjects").attr('checked','false');
          }                 

    }).error(function(data, status) {
            console.log("some error occured partial page");
    });

获得成功后,以下代码无效。

if(angular.equals($scope.selected, "ShowActivatedObjects")) {
                 $("#ShowActivatedObjects").attr('checked','true');
          } else {
                $("#ShowActivatedObjects").attr('checked','false');
          }

我把这段代码放在了成功函数里面。 请告知我需要放置此代码的地方。

3 个答案:

答案 0 :(得分:0)

你好比较可能不好。

  

if(angular.equals($ scope.selected," ShowActivatedObjects")){

我不知道$ scope.selected中有什么值,但我认为这个值是一个布尔类型的复选框状态。所以你要将boolean与string进行比较。

查看https://docs.angularjs.org/api/ng/function/angular.equals

答案 1 :(得分:0)

简短的Angularjs excursus:

一般情况下,你应该尽量减少在angularjs中使用jQuery,因为这两个概念都是相互作用的。 Angularjs基于范围变量和模板表达式之间的绑定。因此,对于一个复选框,您可以轻松处理它,而无需jQuery,如下所示:

你可以在这里找到一个很好的解释: https://stackoverflow.com/a/14520103/4852206

你在这里看到的是,你是i.ex.可以将复选框输入绑定到数组。如果要更改数组内容,则复选框正在侦听并立即更改状态(已选中或未选中),而无需检查它是否处于活动状态且没有Jquery dom操作需求。

我写了上面的excursus,因为如果你将使用你的方式作为最佳实践,你会遇到巨大的非结构化和不可读的代码。另外我担心你在控制器功能中使用你的代码。在Angularjs中,控制器不是用于dom操作,你应该只用它来设置/更改范围变量或只是一个最小的业务逻辑(通常在这里避免它!)业务逻辑应该进入服务,dom操作应该进入指令。

您的问题:

请提供有关您的问题/逻辑的更多信息。请提供示例复选框,以及通过$ http从服务器提取的示例信息 请提供您想要达到的目标。然后我们可以帮助您找到明确的答案。

对不起,我知道这不是答案,但我实际上无法添加评论,因为我在这里很新。

修改 好的,谢谢你对@Likeee的评论,我想我得到了你。您的页面上有一组复选框。在页面加载时,您要检查哪个复选框需要处于活动状态。在pageload上激活复选框的逻辑来自服务器端,这是正确的吗?如果是的话,我会按照以下角度结构处理它(为了更好地理解我创造了一个小提琴:https://jsfiddle.net/pfk9u3h0/4/

首先你需要你的HTML:

<body ng-app="myApp" ng-controller="AppController">
    <label ng-repeat="filter in productFilter">
        <!--
            simply checking if the array contains the entry. if not, it is not selected. On a click event, the selected     item is added to the array.
          -->  
        <input
        type="checkbox" 
        value="{{filter}}" 
        ng-checked="selection.indexOf(filter) > -1"
        ng-click="toggleSelection(filter)"/> {{filter}}
    </label>
    "selection Array within SelectionService": <br />{{selection}} <br /><br />
    as you see, the array is also updating when you check or uncheck a box
</body>

这个HTML剪辑做了几件事:

首先它声明了哪个控制器(这里使用“AppController”)。 其次,它创建一个带有复选框的标签。该标签具有Angularjs指令ngRepeat,并导致显示与AppController中包含的数组“productFilter”一样多的复选框。

Javascript包含一个与您的HTML和服务通信的控制器。该服务也在下面声明。

控制器:

app.controller("AppController", function( $scope, SelectionService ) {
    // available filter checkboxes
    $scope.productFilter = ['Red pants', 'Green Pants', 'Yellow pants', 'Blue pants'];

    // selected filter
    // normally you just would have this: $scope.selection = ['Red pants', 'Blue pants'];
    // But now you want to pull the selection elsewhere:
    // The selection should go in a service, because it can happen, that other pageviews of your page shall 
    // change the values or even get the selection as well.
    $scope.selection = SelectionService.selection; // Bind the selection to the service
    // With the proper binding, you can change the selection within other modules / pages etc. and this
    // checkbox fields will update based on the service data!


    //I just initialize the service selection array, butbut you really want to pull it from server like this:
   // SelectionService.loadSelection() 
//      .then(function(data) {
            // if you like, yo can do sth. with this promise callback
    //  });

    // Change selection for the clicked input field
    $scope.toggleSelection = function toggleSelection(filter) {
        var idx = $scope.selection.indexOf(filter);

        // is currently selected
    if (idx > -1) {
        SelectionService.removeSelection(idx);
    }

    // is newly selected
    else {
        SelectionService.addSelection(filter);
    }
    };    
});

使用$scope.productFilter = ['Red pants', 'Green Pants', 'Yellow pants', 'Blue pants'];我们声明一个数组,我们在HTML中迭代它。这包含所有带名称的复选框。

现在我们需要一个包含所有选中复选框的数组。这保存在$ scope.selection中,并绑定到我最后显示的服务:

$scope.selection = SelectionService.selection; 

如果取消选中或选中复选框

,控制器中的其余部分只是设置新值

服务:

app.service("SelectionService", function ($http, $q) {
    var obj = {
        selection : ['Red pants', 'Blue pants'], 
        loadSelection : function(){ 
            var that = this;
            var deferred = $q.defer();
            var config = {
                responseType : "json",
                cache: true
            }   
            $http.get("/getSelectionFromServer", null, config)
                .success(function(response){
                    if(response) {
                        // IMPORTANT: Use a deep copy, otherwise you will loose the binding
                        angular.copy(response,that.selection);
                    }
                    deferred.resolve(response);
                })
                .error(function(){
                  deferred.reject();
               });
            return deferred.promise;
        },
   addSelection : function (filter) {
        this.selection.push(filter)
    },
    removeSelection : function (index) {
        this.selection.splice(index, 1);
    };

    return obj;
});

服务正在做4件事:它保存并初始化(如果你喜欢)一个数组“选择”。它提供了一种从服务器加载新数据并将其保存到阵列的方法。这里使用复制方法很重要,否则你将失去任何绑定。它提供了设置和删除选择的方法。 在我的例子中我不使用load方法,因为我这里没有任何服务器端脚本...我只是采取初始化值。但你应该使用我的加载方法。

答案 2 :(得分:0)

最后我达到了我的要求:

 // $scope.getCustomObjectsBasedOnObjectTypeSelection = getCustomObjectsBasedOnObjectTypeSelection;
       $scope.selected = ['Show All'];
       var IsActive = "";            
      $scope.objectSelection = function objectSelection(objectType) {
         var idx = $scope.selected.indexOf(objectType);

          // is currently selected
          if (idx > -1) {   
            $scope.selected.splice(idx, 1);
          }           
          // is newly selected
          else {
             $scope.selected.push(objectType);
          } 
      };