如何通过使用ID隐藏链接? [英] How to hide a link by using Id's?

问题描述

在我的应用程序中，我使用ID隐藏了一些链接.加载页面时，数据库调用将转到并选择所有ID.在下面的示例代码中，Id只是ID.

In my application I'm hiding some links by using Ids. While loading pages a DB call will go and pick all Ids. Ids are nothing but Ids in the below sample code.

 <ul id="menu-content">           
      <li><a href="HomePage" id="HomeId"><spring:message code="label.home"/></a></li>
      <li><a href="loginPage" id="loginPageId"><spring:message code="label.login" /></a></li>
      <li><a href="define" id="defineId"><spring:message code="label.define" /></a></li>
 </ul>

我将使用以下代码隐藏链接. AngularJS控制器:

I'll hide the links by using following code. AngularJS Controller:

 'use strict';
app.factory('actionToPerform',['$http', function($http) {

    return {
        getCustomMenus: function($scope,data) {

            angular.forEach(data, function(key,value) { 
                angular.forEach(key, function(k,v) {    

                        var id=k.Identification;

                        var div = document.getElementById(id);
                        if(div !== null){
                        if (div.style.display !== 'none') {
                            div.style.display = 'none';
                        }
                        }
                });


            });

            return "Hello, World!";
        }
    };

 }]);

但是我的新要求是我只想显示onload函数中的Id.在onload函数中，我将获得一个或两个Id的全部.如果我得到一个ID，那么我只想显示该链接，其他链接则需要隐藏.我该如何进行.提前谢谢.

But my new requirement is I want to show only the Id's which came In onload function.In onload function I will get one or two Id's not all. If I get one Id then I want to show that link only, Other links need to hide. How can I proceed. Thanks In Advance.

推荐答案

您可以通过使用AngularJS的E2E绑定轻松地做到这一点.例如，使用 ng-hide .AngularJS非常特别，它提供了E2E绑定之类的功能.这样，您就无需像以前尝试的那样进行DOM注入.

You can do it easily by using the E2E binding of AngularJS. For example by using ng-hide. AngularJS is very special and provides features like a E2E binding. In that way you don't need to make DOM injections like you tried before.

我还从DOM中删除了属性 id .使用AngularJS方式时不需要它们.

I also removed the attribute id from DOM. You don't need them while using the AngularJS way.

这是一个示例，您可以使用AngularJS实现显示/隐藏某些元素.在这种情况下，需要按下按钮以隐藏元素.您还可以通过注入 $ scope 参数，例如 $ scope.toggleMenuItem('homeId')，将元素隐藏在控制器或其他函数中.

This is an example how you can implement show/hide some elements with AngularJS. In this case a button need to be pressed to hide elements. You can also hide element inside your controller or other function by injection the $scope params like $scope.toggleMenuItem('homeId').

<div ng-app="myApp">
    <div ng-controller="testController">
        <ul id="menu-content">
            <li><a href="HomePage" ng-hide="menuState.homeId"><spring:message code="label.home"/></a></li>
            <li><a href="loginPage" ng-hide="menuState.loginPageId"><spring:message code="label.login" /></a></li>
            <li><a href="define" ng-hide="menuState.defineId"><spring:message code="label.define" /></a></li>
        </ul>

        <button ng-click="toggleMenuItem('homeId')">Toggle menu entry 1</button>
        <button ng-click="toggleMenuItem('loginPageId')">Toggle menu entry 2</button>
        <button ng-click="toggleMenuItem('defineId')">Toggle menu entry 3</button>
    </div>
</div>

AngularJS应用/控制器

var myApp = angular.module('myApp',[]);

myApp.controller('testController', ['$scope', function($scope) {
    $scope.menuState = {
        homeId: false,
        loginPageId: false,
        defineId: false,
     };

    $scope.toggleMenuItem = function (menuId) {
      if (angular.isDefined($scope.menuState[menuId])) {
         $scope.menuState[menuId] = !$scope.menuState[menuId];
      }
    }
}]);

这篇关于如何通过使用ID隐藏链接?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！