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

什么是最好的方法取决于您的标准和其他要求，但一种可能的（可能＆＃34;良好＆＃34;）方法是使用＆＃34;允许＆＃34;的数组扩展每个导航项。作业标题（角色）然后创建（并使用）自定义过滤器，按作业标题（角色）过滤导航项。

<子> 重要提示：
正如其他人所提到的，理解这仅用于UI和演示目的并且仅通过隐藏View元素不提供安全性是非常重要的。应在服务器端强制执行任何基于角色的限制。

<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，值是菜单项数组。如果地图中不存在密钥，则Whatever案例可以作为默认数组处理，即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;

或者，如果对其他设计问题（例如，特定于JobTitle的另一个属性）有意义，则定义类型Job的对象，具有属性title（字符串）和navigation_items（数组）。

有效地显示和隐藏菜单项

2 个答案: