Question

我有一个看起来如下的控制器：

var ModalDemoCtrl = function ($scope, $modal, $log) {
    $scope.items = [{name:'Category1', children:['SPCH-1311','SPCH-1315','SPCH-1321','ARAB-1311','ARAB-1312',
                          'CHIN-1312','CHIN-1411','CHIN-1412','CZEC-1311','CZEC-1312',
                          'FREN-1311','FREN-1312','FREN-1411','GERM-1311','GERM-1312',
                          'GERM-1411','GREE-1412','ITAL-1412','JAPN-1412','KORE-1412',
                          'LATI-1412','PORT-1412','RUSS-1412','SGNL-1301','SGNL-1302',
                          'SPAN-1311','SPAN-1312','SPAN-1411','SPAN-1412','VIET-1311',
                          'VIET-1312','VIET-1411','VIET-1412']},
                          {name:'Category2', children:['SPCH-1311','SPCH-1315','SPCH-1321','ARAB-1311','ARAB-1312',
                          'CHIN-1312','CHIN-1411','CHIN-1412','SPAN-1311','SPAN-1312','SPAN-1411','SPAN-1412','VIET-1311',
                          'VIET-1312','VIET-1411','VIET-1412']}];

    $scope.open = function () {

        var modalInstance = $modal.open({
            templateUrl: 'myModalContent.html',
            controller: ModalInstanceCtrl,
            resolve: {
                items: function () {
                    return $scope.items;
                }
            }
        });

        modalInstance.result.then(function (selectedItem) {
            $scope.selected = selectedItem;
        }, function () {
            $log.info('Modal dismissed at: ' + new Date());
        });
    };
};

我的模态如下所示：

<a class="btn btn-default pull-right" data-toggle="modal" data-target="#myModal">Add Course <span class="glyphicon glyphicon-plus"></span></a>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

                <h4 class="modal-title" id="myModalLabel">{{subcategory.name2}}</h4>
            </div>
            <div class="modal-body" align="center">
                <font size="2" align="center">Required Credits : <span class="badge badge-machb">{{subcategory.required2}} </span>
                        Completed Credits : <span class="badge badge-machb">{{subcategory.completed2}} </span>
                        Planned Credits : <span class="badge badge-machb">{{subcategory.planned2}} </span></font>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

问题是我如何定义按钮以显示它显示＆＃34; Category1＆＃34;的内容的子项。当一个名为＆＃34; category1＆＃34;的按钮时单击一个模态和＆＃34; Category2＆＃34;何时点击相应的？

上述模式中的计划，必需和完成的学分来自另一个控制者，因此可以忽略！

Answer 1

答案很简单。请参阅plunker以全面了解我的讨论情况。

通过ng-repeat迭代项目，并将每个item.category显示为由ng-click事件绑定的按钮，并传递要用于解析模式的项目的索引。

<强> HTML

<body ng-controller="ModalDemoCtrl">
    <button ng-repeat="item in items" ng-bind="item.name" ng-click="open($index)"></button>
</body>

上面的html片段表明ng-click事件回调open()必须接受迭代项目的当前$索引。使用$ index获取特定类别并将其传递给模式的控制器ModalInstanceCtrl $ scope，以供myModalContent.html模板使用。

<强> JAVASCRIPT

var ModalDemoCtrl = function ($scope, $modal, $log) {
  $scope.items = [{name:'Category1', children:['SPCH-1311','SPCH-1315','SPCH-1321','ARAB-1311','ARAB-1312',
                  'CHIN-1312','CHIN-1411','CHIN-1412','CZEC-1311','CZEC-1312',
                  'FREN-1311','FREN-1312','FREN-1411','GERM-1311','GERM-1312',
                  'GERM-1411','GREE-1412','ITAL-1412','JAPN-1412','KORE-1412',
                  'LATI-1412','PORT-1412','RUSS-1412','SGNL-1301','SGNL-1302',
                  'SPAN-1311','SPAN-1312','SPAN-1411','SPAN-1412','VIET-1311',
                  'VIET-1312','VIET-1411','VIET-1412']},
                  {name:'Category2', children:['SPCH-1311','SPCH-1315','SPCH-1321','ARAB-1311','ARAB-1312',
                  'CHIN-1312','CHIN-1411','CHIN-1412','SPAN-1311','SPAN-1312','SPAN-1411','SPAN-1412','VIET-1311',
                  'VIET-1312','VIET-1411','VIET-1412']}];

  $scope.open = function ($index) {
    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      resolve: {
        item: function() {
          return $scope.items[$index];
        }
      }
    });
  };
};

var ModalInstanceCtrl = function ($scope, $modalInstance, item) {
   $scope.item = item;
};

Answer 2

我不确定这是否是您正在寻找的答案，但现在就可以了。您似乎想要它，以便当您单击按钮时，它将显示您的某个类别的子项。所以，这是代码。

HTML显示每个类别的按钮：

<button  ng-repeat="item in items" ng-click="displayChildren(item)"  ng-bind="item.name"></button>

UL在您选择按钮时显示孩子：

<ul>
    <li ng-repeat="child in children" ng-bind="child"></li>
</ul>

控制器中的代码：

$scope.items = [
    {
        name: "category1",
        children: [
            "CHIN-1",
            "CHIN-2",
            "CHIN-3"
        ]
    },
    {
        name: "category2",
        children : [
            "VIET-1",
            "VIET-2",
            "VIET-3"
        ]
    }];

$scope.displayChildren = function(item){
    $scope.children = item.children;
}

从控制器到模态的角度数据

2 个答案: