简体   繁体   中英

ng-show not working properly - AngularJS

I'm using AngularJS 1.6.6 to develop a web app. I'm using ng-show on my template to recycle it:

<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>

This is trying to show a different button depending on the url used to access. Here is the code of the controller:

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);
}]);

So, when I access that template to create an object, the url ends with "createObject" and it should show only one of the buttons, and the same with "editObject" and "deleteObject". But, don't know why, is showing the three of them.

I've also tried:

<button data-ng-show="objectHandlerVM.object.idn!=undefined">Edit</button>
<button data-ng-show="objectHandlerVM.object.idn==undefined">Create</button>

And it also shows both of them, which is confusing me the most...

ng-show works with boolean, if you want to check the url, you can have a function to do that and return true/false based on that,

 <button data-ng-show="checkUrl()">Edit</button>

and in controller

$scope.checkUrl = function(){
    //add your logic
    return true/false;
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM