代码之家 › 专栏 › 技术社区 › Jaime Alcántara Arnela

NG显示工作不正常-Angularjs

angularjs javascript

Jaime Alcántara Arnela · 技术社区 · 6 年前

我正在使用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以“create object”结尾,它应该只显示其中一个按钮,与“editobject”和“deleteobject”相同。但是,不知道为什么,是在展示他们三个。

我也试过:

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

它也显示了他们两个,这是最让我困惑的…

1 回复 | 直到 6 年前

Sajeetharan 6 年前

ng show与boolean一起工作,如果你想检查url,你可以有一个函数来检查,并根据这个函数返回true/false,

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

在控制器中

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