Angular JS：ng-hide 和 ng-show API答案

【问题标题】：Angular JS: ng-hide and ng-show APIAngular JS：ng-hide 和 ng-show API
【发布时间】：2012-10-11 05:29:04
【问题描述】：

我有一个 HTML 页面，其中包含多个 <div> 容器。我需要根据用户 ID 显示这些 <div> 容器。例如：我在页面中创建了 4 个<div> 容器，例如 div1、div2、div3 和 div4。我有两个用户：user1 和 user2。

我想在用户 1 访问页面时显示 div1 和 div3。并在 user2 访问时显示 div2 和 div4。我想使用 AngularJS 的 ng-hide 和 ng-show 指令。我怎样才能做到这一点？

【问题讨论】：

您如何确定访问该页面的用户？我已经提供了一个一般性的答案，如有必要，我会更新它。

标签： javascript angularjs

【解决方案1】：

我会在某种用户访问对象的 $scope 上设置属性，以便在您加载用户时切换它们。

假设当控制器加载用户时它可能是这样的：

app.controller('SecuredForm', function($scope) {
     //get your user from where ever.
     var user = getSomeUser(); 

     // set your user permissions
     // here's some contrived example.
     $scope.permissions = {
         showAdmin: user.isRegistered && user.isAdmin,
         showBasic: user.isRegistered,
         showHelp: !user.isBanned
     }
});

在您的 html 中，您可以使用这些范围项来设置显示或隐藏您的区域：

<div ng-show="permissions.showAdmin">
  <h3>Admin Area</h3>
  <!-- admin stuff here -->
</div>
<div ng-show="permissions.showBasic">
  <h3>Basic Info</h3>
  <!-- admin stuff here -->
</div>
<div ng-show="permissions.showHelp">
  <h3>Help</h3>
  <!-- help stuff here -->
</div>

需要注意的一点是 ng-show 和 ng-hide 根本不显示 HTML...html 仍在客户端上。因此，请确保当您向需要更改某些内容的服务器进行回调时，您正在在服务器上检查它们。您不能仅仅因为表单可见就假定用户有权执行某项操作。（你可能已经知道了，我只是想彻底）。

【讨论】：

【解决方案2】：

为什么不试试这个jsfiddle。更改 $scope.userId 变量，当您在 jsFiddle 中点击“运行”时，您将看到更新的更改。代码：

HTML：

<div ng-app>
    <div ng-controller="DivGroup">
        <div ng-show="getUserId() == 1">Div 1</div>
        <div ng-show="getUserId() == 2">Div 2</div>
        <div ng-show="getUserId() == 1">Div 3</div>
        <div ng-show="getUserId() == 2">Div 4</div>       
    </div>
</div>

JavaScript：

function DivGroup($scope) {

    $scope.userId = 2;

    $scope.getUserId = function() {
        console.log('test');
        return $scope.userId;             
    }
}

userId 为 1 时显示 1 和 3 的内容，为 2 时显示 2 和 4 的内容。

【讨论】：

【解决方案3】：

this true : false, show : hide 逻辑对我来说效果很好，但它主要用作切换。 http://geniuscarrier.com/ng-toggle-in-angularjs/

【讨论】：