22

I have a HTML page containing several <div> containers. I require to show these <div> containers based on the user id. For example: I have 4 <div> containers created in a page say div1, div2, div3 and div4. And I have two users: user1 and user2.

I would like to show div1 and div3 when user 1 access to the page. and show div2 and div4 when user2 access it. I would like to use ng-hide and ng-show directives of AngularJS. How can I achieve this?

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>

注意すべき点の1つは、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;             
    }
}

が1の場合はuserId、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 に答える