如何使用ng repeat在一次迭代中访问(项中的项）的2个项

How can I access 2 items of (item in items) in one iteration using ng-repeat

本文关键字：迭代 访问 2个项 一次 ng 何使用 repeat      更新时间：2023-09-26

我正试图让我的菜单页面上的按钮并排排列，但我需要使用ng repeat一次制作两个按钮任何人都有关于另一种方法的建议，或者有没有方法可以使用ng repay 来做到这一点

这是我的部分视图的html代码

<div>
    <div ng-repeat="buttons in menuButtons | exactMatchFilter">
        <div class="btn-group btn-group-justified">
        <!--Button 1-->
            <div class="btn-group">
                <button type="button" class="btn btn-default" ng-click="goToView1()">{{buttons[0].info}}</button>
            </div>
           <!--Button 2-->
            <div class="btn-group">
                <button type="button" class="btn btn-default" ng-click="goToView1()">{{buttons[1].info}}</button>
            </div>
        </div>
    </div>
</div>

我只添加了按钮[1]，[0]，这样你就可以看到我想做什么了。我知道你不能在这里添加索引。

您可以编写类似的按钮对象

var buttons = { 
 one: { info: 'someinfo'},
 two: { info: 'someInfo' }
};

然后在ng重复中，你可以像这个一样

<!--Button 1-->
<div class="btn-group">
   <button type="button" class="btn btn-default" ng-click="goToView1()">{{buttons.one.info}}</button>
</div>
<!--Button 2-->
   <div class="btn-group">
      <button type="button" class="btn btn-default" ng-click="goToView1()">{{buttons.two.info}}</button>
   </div>

如果你想立刻做到这一点，你可能需要编写自定义ng指令。

  angular.module('docsSimpleDirective', [])
    .controller('Controller', ['$scope', function($scope) {
      $scope.button = {
        one: {info: 'some info'},
        two: {info: 'other info'}
      };
    }])
    .directive('myButtons', function() {
      return {
        template: '<button>{{button.one.info}}</button> <button>{{button.two.info}}</button>'
      };
    });
相关文章：