Angular JS：ng-hide和ng-show API

Question

我有一個包含幾個<div>容器的HTML頁面。我需要根據用戶ID顯示這些<div>容器。例如：我在頁面中創建了4個<div>容器，分別爲div1，div2，div3和div4。我有兩個用戶：user1和user2。

我想在用戶1訪問頁面時顯示div1和div3。並在user2訪問它時顯示div2和div4。我想使用AngularJS的指令ng-hide和ng-show。我怎樣才能做到這一點？

Answer 1

爲什麼不給這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時，它顯示一個和三個的內容，當它的2它顯示兩個內容，並四。

Answer 2

我會在某種形式的用戶訪問對象的範圍$設置屬性切換他們時，您加載用戶。

假設用戶在加載時控制器也可能是類似這樣：

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仍然在客戶端。所以請確保當你打電話回服務器，需要權限來改變你正在檢查他們在服務器。您不能假設用戶有權執行某些操作，只是因爲表單可見。 （你可能已經知道這一點，我只是想徹底）。

Answer 3

這是真的：假，顯示：隱藏邏輯對我來說工作得很好，但它作爲切換功能非常有用。 http://geniuscarrier.com/ng-toggle-in-angularjs/