Question

我正在尝试做一个类似于下拉列表的自定义菜单，但我也希望它依赖于当前值，例如我有三个模块：["A", "B", "C"]和相应的部分使用<ul>构建ngRepeat，并使用ngInclude指令将此部分包含在我的html中。因此，当我点击菜单时，我看到第一个项目是当前页面的列表，然后我选择模块“B”，我想以不同的顺序看到项目，即["B", "A", "C"]。

在代码中它看起来像这样：

我的include指令 -

<ng-include src="'assets/app/modules/header/header-menu.html'"></ng-include>

加载此部分：

<ul id="header-navigation"
    class="header-navigation"
    data-ng-hide="headerVm.showMenu">
    <li data-ng-repeat="module in headerVm.modules"
        class="header-title noselect">
        <span data-ng-click="headerVm.open(module)">{{ module }}</span>
    </li>
</ul>

我想我需要一些像$eval这样的高级内容来显示每次点击的重新排序菜单列表，或者有更好的技术可以做到这一点？

更新

要更新我拥有的模块列表：

function HeaderController(routehelper) {
    var self = this
    self.showMenu = false;
    self.showAppMenu = function() {
        self.showMenu = !self.showMenu;
    };
    self.open = function(module) {
        self.current = module;
        rebuildMenu(module, self.modules);
        self.showMenu = true;
    }
}

function rebuildMenu(newModule, modules) {
    var updated = _.without(modules, _.findWhere(modules, newModule));
    updated.unshift(newModule)
}

但是当角度运行open时，元素的顺序仍然相同，没有任何变化。

Answer 1

_.without返回一个副本，因此范围内的实际对象不会更新。

使用self.modules = updated.unshift(newModule)。

Answer 2

我不确定那是你真正需要的，但似乎你是这样的：

ng-click="headerVm.open(module) ; reverse=!reverse; order('module', reverse)";

并在控制器中：

var orderByFUNC = $filter('orderBy'); 
$scope.order = function(column, reverse) {
    $scope.friends = orderByFUNC($scope.friends , column, reverse);
};

这里是小提琴：http://jsfiddle.net/MKuriata/9m3z14tL/1/

重新评估包括部分点击

2 个答案: