효율적으로 메뉴 항목 표시 및 숨기기

Question

지금은 탐색 메뉴가 있습니다. 그러나 직책에 따라 특정 메뉴 항목 만 볼 수 있습니다.

내가 가진 HTML의 모습을 다음

<ul> 
     <li ng-repeat="item in navigationItems | orderBy:'-ID'"> 
      <a href="#/{{item.Name}}">{{item.Name}}</a> 
     </li> 
</ul> 

다음과 같이이의 컨트롤러 인 ...

이 간단 해졌습니다

$scope.navigationItems = 
     [ 
      { 
       Name: "Item 1", 
       ID: 1 
      }, 
      { 
       Name: "Item 2", 
       ID: 2 
      }, 
      { 
       Name: "Item 3", 
       ID: 3 
      }, 
      { 
       Name: "Item 4", 
       ID: 4 
      },       
     ] 

. 실제로 15 개의 메뉴 항목이 있습니다.

다섯 가지 직책이 있으며 각 직책에 대해 특정 메뉴 항목 만 볼 수 있습니다. 내가 예를 들어, 그들이 볼 수있는 메뉴 항목이 다음 각 제목 ...에 대한 검사를하고 피할 수있는 방법이 .... 내가하고 싶지 않은 것 등

if(JobTitle=="Manager") 
{ 
     $scope.navigationItems = [item 1, item 2, item 12, item 7....] 
} 
else if(JobTitle =="Staff") 
{ 
     $scope.navigationItems = [item 5, item 9, item 12, item 15....] 
} 
else if(JobTitle == "Whatever") 
{ 
     $scope.navigationItems = [item 12, item 14, item 15....] 
} 

하고있다. 각 경우에 대해 메뉴 항목 중 일부를 다시 입력해야하는 대신 각도에서이 작업을 수행하는 것이 더 좋고 더 최적의 방법입니까?

Answer 1

귀하의 기준과 다른 요구 사항에 따라 최선의 접근 방식은 달라질 수 있습니다. 그러나 한 가지 가능한 방법은 "허용 된"직책 (역할)의 배열로 각 탐색 항목을 확장 한 다음 작업 제목 (역할)별로 탐색 항목을 필터링하는 사용자 지정 필터를 사용합니다.

_{중요 사항 : 다른 사람이 언급 한 것처럼
,이 단지 UI 및 프리젠 테이션 목적을위한 어떠한 보안이 단지보기 요소를 멀리 숨겨 제공되지 않는 것을 이해하는 것이 매우 중요합니다. 모든 역할 기반 제한 사항은 서버 측에서 시행되어야합니다.}

---

<ul> 
    <li ng-repeat="item in navigationItems | filterByRole:jobTitle | orderBy:-'ID'"> 
     <a href="#/{{item.Name}}">{{item.Name}}</a> 
    </li> 
</ul> 

$scope.navigationItems = [{ 
    Name: "Item 1", 
    ID: 1, 
    Roles: [...] 
}, { 
    Name: "Item 2", 
    ID: 2, 
    Roles: [...] 
}, { 
    ... 

app.filter('filterByRole', function() { 
    return function (items, role) { 
     return items.filter(function (item) { 
      return item.Roles.indexOf(role) !== -1; 
     }); 
    }; 
}); 

---

참조 , 또한,이 short demo.

Answer 2

Map 구조에 메뉴 항목을 넣을 수 있습니다. 키는 JobTitles이고 값은 메뉴 항목의 배열입니다. 대소 문자가지도에 키가 없으면 기본 배열로 처리 할 수 ​​있습니다 (예 : undefined).

var jobTitleToMenuItems = {} 
jobTitleToMenuItems["Manager"] = [item 1, item 2, item 12, item 7....]; 
jobTitleToMenuItems["Staff"] = [item 5, item 9, item 12, item 15....]; 
var defaultMenuItems = [item 12, item 14, item 15....]; 

var menuItems = jobTitleToMenuItems[JobTitle]; 
$scope.navigationItems = menuItems ? menuItems : defaultMenuItems; 

또는, 특성 title (문자열)과 navigation_items (배열) 설계와 다른 문제합니다 (JobTitle 특정 예컨대 다른 속성) 유형 Job의 개체 정의와 의미가있는 경우.