簡體   English   中英

ng-show無法正常工作-AngularJS

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

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM