Angular JS : ng-hide 및 ng-show API

Angular JS : ng-hide 및 ng-show API

나는 몇개의 HTML 페이지를 가지고 있습니다.<div>용기들이걸 보여줘야 합니다.<div>사용자 ID를 기반으로 하는 컨테이너.예를 들어,4개 있습니다.<div>페이지에서 만들어진 컨테이너는 div1, div2, div3, div4라고 말합니다.그리고 user1과 user2 두 사용자가 있습니다.

사용자 1이 페이지에 접속할 때 div1과 div3를 보여주고 싶습니다.그리고 user2가 접속하면 div2와 div4를 보여줍니다.사용하고 싶습니다ng-hide그리고.ng-showAngularJS의 지시 사항.어떻게 하면 이것을 이룰 수 있을까요?

나는 당신이 사용자를 로드할 때마다 그것들을 전환하기 위해 일종의 사용자 액세스 객체의 $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은 여전히 클라이언트에 있습니다.따라서 서버에 다시 전화를 걸 때는 서버에서 확인 중인 내용을 변경할 수 있는 권한이 필요합니다.양식이 보인다고 해서 사용자가 어떤 작업을 수행할 수 있는 권한이 있다고 가정할 수는 없습니다. (이미 알고 계시겠지만, 저는 단지 철저하게 하고 싶습니다.)

이 js fiddle을 한번 시도해 보는게 어때요?변경합니다.$scope.userIdvariable을 클릭하면 jsFiddle에서 run을 누르면 업데이트된 변경 사항을 볼 수 있습니다.코드:

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>

자바스크립트:

function DivGroup($scope) {

    $scope.userId = 2;

    $scope.getUserId = function() {
        console.log('test');
        return $scope.userId;             
    }
}

언제.userId1입니다. 1과 3의 내용을 표시하고, 2일 때는 2와 4의 내용을 표시합니다.

​

이 true : false, show : hide logic은 나에게 정말 잘 작동했지만 대부분 토글로 유용합니다.http://geniuscarrier.com/ng-toggle-in-angularjs/

언급URL : https://stackoverflow.com/questions/12832801/angular-js-ng-hide-and-ng-show-api