Question

我有一个简单的列表项

        <ul class="nav" ng-repeat="mainBrandName in allBrands">
            <li><a href="#" ng-click="goSubBrand(mainBrandName.brand, mainBrandName.subbrands[0].name)">
            Selected Brand Name = {{mainBrandName.brand}}
            </a></li>
        </ul>

列出了一些品牌名称，在每个链接上我都有一个功能onclick，它填充了另一个子品牌集，并且工作正常。

但是我想要这样的导航

        <ul class="nav" ng-repeat="mainBrandName in allBrands">
            <li><a href="#" ng-click="goSubBrand(mainBrandName.brand, mainBrandName.subbrands[0].name)">
            Selected Brand Name = {{mainBrandName.brand}}
            </a></li>
        </ul>
        <a href="#" ng-click="next()">Next</a>
        <a href="#" ng-click="previous()">Previous</a>

这样我点击下一个和上一个（我还需要在选择更改时运行该功能），而不是单击每个列表项，我可以选择。

请帮帮我......

Answer 1

不是很清楚你想要实现什么，一个吸管或小提琴会有所帮助，但如果我找到你，你希望你的导航链接模拟下一个和以前的子品牌链接的点击，你可以使用这样的东西使它工作：

$scope.goSubBrand = function(brand, sub){ 'Your logic here' }

$scope.allBrands = [{brand: 'brand 1', subbrands: [{name: 'subbrand 1'},{...}]}, {brand: 'brand 2',....}];
$scope.selected = {brand: 0, subbrand: 1};

$scope.next = function(){
    if(typeof allBrands[$scope.selected.brand].subbrands[$scope.selected.brand+1] != 'undefined'){
        $scope.selected.subbrand++; //go to next subbrand
    } else {
        $scope.selected.subbrand = 0; //return to first sub brand if last reached
    }
};
$scope.previous = function() { 
    if(typeof allBrands[$scope.selected.brand].subbrands[$scope.selected.brand-1] != 'undefined'){
        $scope.selected.subbrand--; //go to previous subbrand
    } else {
        $scope.selected.subbrand =  $scope.allBrands[$scope.selected.brand].subbrands.length - 1; //go to last if first reached
    }
};
//trigger the method $scope.goSubBrand on any change of the $scope.selected object
$scope.$watchCollection('selected', function(){ 
    var sel = $scope.allBrands[$scope.selected.brand];
    $scope.goSubBrand(sel.brand, sel.subbrands[$scope.selected.subbrand].name);
});

选择通过ng-repeat填充的列表项

1 个答案: