我想在使用角度中的$ 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');
}
我把这段代码放在了成功函数里面。 请告知我需要放置此代码的地方。
答案 0 :(得分:0)
你好比较可能不好。
if(angular.equals($ scope.selected," ShowActivatedObjects")){
我不知道$ scope.selected中有什么值,但我认为这个值是一个布尔类型的复选框状态。所以你要将boolean与string进行比较。
答案 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);
}
};