[英]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.