javascript - 有效地显示和隐藏菜单项

Question

现在我有一个导航菜单。但是，根据您的职位，您只能看到某些菜单项。

我的 html 如下所示

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

Controller 如下...

$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....]
}

等等。有没有更好、更优化的方法来以 Angular 执行此操作，而不必为每种情况重新键入一些菜单项？

Answer 1

什么是最好的方法取决于您的标准和其他要求，但一种可能的(并且可能是“好的”)方法是使用一组“允许的”职位( Angular 色)扩展每个导航项，然后创建(并使用)一个自定义过滤器，该过滤器按职位( Angular 色)过滤导航项。

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

---

<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 .