[英]Angular JS: ng-hide and ng-show API
I have a HTML page containing several <div>
containers. 我有一个包含几个
<div>
容器的HTML页面。 I require to show these <div>
containers based on the user id. 我需要根据用户ID显示这些
<div>
容器。 For example: I have 4 <div>
containers created in a page say div1, div2, div3 and div4. 例如:我在页面中创建了4个
<div>
容器,例如div1,div2,div3和div4。 And I have two users: user1 and user2. 我有两个用户:user1和user2。
I would like to show div1 and div3 when user 1 access to the page. 我想在用户1访问该页面时显示div1和div3。 and show div2 and div4 when user2 access it.
并在user2访问它时显示div2和div4。 I would like to use
ng-hide
and ng-show
directives of AngularJS. 我想使用AngularJS的
ng-hide
和ng-show
指令。 How can I achieve this? 我怎样才能做到这一点?
I would set properties on the $scope in a user access object of some sort to toggle them whenever you load the user. 我会在某种用户访问对象的$ scope上设置属性,以便在加载用户时切换它们。
Assuming the user is loaded when the controller is it could be something like so: 假设用户在控制器加载时加载它可能是这样的:
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
}
});
In your html you'd use those scope items to set show or hide your areas: 在您的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>
One thing to note is that ng-show and ng-hide are simply not displaying the HTML... the html is still on the client. 有一点需要注意的是,ng-show和ng-hide根本就不显示HTML ... html仍在客户端上。 So be sure when you're making calls back to the server that require permissions to alter something you're checking them at the server .
因此,请确保在您回拨服务器时需要权限来更改您在服务器上检查它们的内容 。 You can't assume the user has permission to do something just because the form was visible.
您不能认为用户有权仅仅因为表单可见而执行某些操作。 (You probably already know this, I just want to be thorough).
(你可能已经知道了,我只想彻底)。
Why not give this jsfiddle a go. 为什么不给这个jsfiddle一个去。 Change the
$scope.userId
variable and you will see the updated changes when you hit "run" at jsFiddle. 更改
$scope.userId
变量,当您在jsFiddle点击“run”时,您将看到更新的更改。 The code: 代码:
HTML: 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: JavaScript的:
function DivGroup($scope) {
$scope.userId = 2;
$scope.getUserId = function() {
console.log('test');
return $scope.userId;
}
}
When the userId
is 1, it displays the contents of one and three, when it's 2 it displays the contents of two and four. 当
userId
为1时,它显示一个和三个的内容,当它为2时,它显示两个和四个的内容。
this true : false, show : hide logic worked really well for me, but it's mostly useful as a toggle. 这是真的:假,显示:隐藏逻辑对我来说非常好用,但它最适合用作切换。 http://geniuscarrier.com/ng-toggle-in-angularjs/
http://geniuscarrier.com/ng-toggle-in-angularjs/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.