[英]ng-show not working properly - AngularJS
我正在使用AngularJS 1.6.6开发Web应用程序。 我在模板上使用ng-show对其进行回收:
<div >
<br/>
<div class="form">
<form data-ng-submit="objectHandlerVM.functions.objectHandlerSwitcher()">
<button data-ng-show="objectHandlerVM.functions.where('/editObject/'+objectHandlerVM.object.idn)">Edit</button>
<button data-ng-show="objectHandlerVM.functions.where('/createObject')">Create</button>
<button data-ng-show="objectHandlerVM.functions.where('/deleteObject/'+objectHandlerVM.object.idn)">Delete</button>
</form>
</div>
</div>
这试图显示一个不同的按钮,具体取决于用于访问的URL。 这是控制器的代码:
angular.module('objectApp')
.controller('objectHandlerCtrl', ['objectFactory','usersFactory','$routeParams','$location',
function(objectFactory,usersFactory,$routeParams,$location){
var objectHandlerViewModel = this;
objectHandlerViewModel.object={};
objectHandlerViewModel.functions = {
where : function(route){
return $location.path() == route;
},
readUserNameEmail : function() {
usersFactory.getUser()
.then(function(response){
objectHandlerViewModel.object.title= response.title;
objectHandlerViewModel.object.content= response.content;
console.log("Reading user with id: ",response.idn," Response: ", response);
}, function(response){
console.log("Error reading user data");
})
},
updateObject : function() {
objectFactory.putObject(objectHandlerViewModel.object)
.then(function(response){
console.log("Updating object with id:",objectHandlerViewModel.object.idn," Response:", response);
}, function(response){
console.log("Error updating object");
})
},
createObject : function() {
objectFactory.postObject(objectHandlerViewModel.object)
.then(function(response){
console.log("Creating object. Response:", response);
}, function(response){
console.log("Error creating the object");
})
},
deleteObject : function(id) {
objectFactory.deleteObject(id)
.then(function(response){
console.log("Deleting object with id:",id," Response:", response);
}, function(response){
console.log("Error deleting object");
})
},
objectHandlerSwitcher : function(){
if (objectHandlerViewModel.functions.where('/createObject')){
console.log($location.path());
objectHandlerViewModel.functions.createObject();
}
else if (objectHandlerViewModel.functions.where('/editObject/'+objectHandlerViewModel.object.idn)){
console.log($location.path());
objectHandlerViewModel.functions.updateObject();
}
else if (objectHandlerViewModel.functions.where('/deleteObject/'+objectHandlerViewModel.object.idn)){
console.log($location.path());
objectHandlerViewModel.functions.deleteObject(objectHandlerViewModel.object.idn);
}
else {
console.log($location.path());
}
$location.path('/');
}
}
console.log("Entering objectHandlerCtrl with $routeParams.ID=",$routeParams.ID);
if ($routeParams.ID==undefined) objectHandlerViewModel.functions.readUserNameEmail();
else objectHandlerViewModel.functions.readObject($routeParams.ID);
}]);
因此,当我访问该模板以创建对象时,URL以“ createObject”结尾,并且应该仅显示按钮之一,并以“ editObject”和“ deleteObject”相同。 但是,不知道为什么,要显示三个。
我也尝试过:
<button data-ng-show="objectHandlerVM.object.idn!=undefined">Edit</button>
<button data-ng-show="objectHandlerVM.object.idn==undefined">Create</button>
它也显示了它们两者,这让我最困惑。
ng-show与boolean配合使用,如果您想检查url,则可以使用一个函数来执行此操作并根据该结果返回true / false,
<button data-ng-show="checkUrl()">Edit</button>
并在控制器中
$scope.checkUrl = function(){
//add your logic
return true/false;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.