22

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

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

4

3 回答 3

25

我会在某种用户访问对象的 $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 仍然在客户端上。因此，请确保当您向需要更改某些内容的服务器进行回调时，您正在服务器上检查它们。您不能仅仅因为表单可见就假定用户有权执行某项操作。（你可能已经知道了，我只是想彻底）。

于 2012-10-11T14:56:59.727 回答
15

为什么不试试这个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;             
    }
}

为userId1 时显示 1 和 3 的内容，为 2 时显示 2 和 4 的内容。​</p>

​</p>

于 2012-10-11T05:57:34.093 回答
-2

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

于 2014-05-15T15:51:55.750 回答