javascript - Angular JS : ng-hide and ng-show API

Question

我有一个 HTML 页面，其中包含几个 <div>容器。我需要显示这些<div>基于用户 ID 的容器。例如:我有4 <div>在页面中创建的容器为 div1、div2、div3 和 div4。我有两个用户:user1 和 user2。

我想在用户1访问该页面时显示div1和div3。并在 user2 访问时显示 div2 和 div4。我想使用ng-hide和ng-show AngularJS 的指令。我怎样才能实现这个目标？

Answer 1

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

假设当 Controller 加载时用户已加载，可能如下所示:

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 仍然在客户端上。因此，当您向需要更改某些内容的权限的服务器进行回调时，请务必在服务器上检查这些内容。您不能仅仅因为表单可见就假设用户有权执行某些操作。 (你可能已经知道这一点，我只是想彻底)。