Question

我正在使用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>

这是尝试根据用于访问的网址显示不同的按钮。这是控制器的代码：

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>

它也显示了两者，这让我最困惑......

Answer 1

ng-show与boolean一起使用，如果你想检查url，你可以有一个函数来做，并根据它返回true / false，

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

并在控制器中

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

ng-show无法正常工作 - AngularJS

1 个答案: