Question

在我的应用程序中，我使用ID隐藏了一些链接。在加载页面时，DB调用将会选择所有ID。在下面的示例代码中，Ids只不过是Ids。

 <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控制器：

 '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，那么我只想显示该链接，其他链接需要隐藏。我该怎么办？在此先感谢。

Answer 1

您可以使用AngularJS的E2E绑定轻松完成。例如，使用ng-hide。 AngularJS非常特殊，并提供类似E2E绑定的功能。通过这种方式，您不需要像以前那样进行DOM注射。

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

这是一个如何使用AngularJS实现显示/隐藏某些元素的示例。在这种情况下，需要按下按钮来隐藏元素。您还可以通过注入像$scope这样的$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 App / Controller

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隐藏链接？

1 个答案:

视图

AngularJS App / Controller