Question

我试图让我的菜单页面并排按钮但是我需要使用ng-repeat一次制作2个按钮任何人都有关于另一种方法的建议或者是否有办法用ng-repeat执行此操作

这是我的部分视图的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]所以你可以看到我想要做什么我知道你不能在这里添加索引

Answer 1

你可以写这样的按钮对象

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

然后在ng-repeat中你可以这样

<!--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-directive。

  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>'
      };
    });

如何使用ng-repeat在一次迭代中访问2项（项目中的项目）

1 个答案: