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

【问题标题】：Angular data from controller into modal从控制器到模态的角度数据
【发布时间】：2014-03-27 20:49:26
【问题描述】：

我有一个如下所示的控制器：

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>

问题是我如何定义按钮，使其在模式中单击名为“category1”的按钮时显示“Category1”内容的子项，单击相应按钮时显示“Category2”内容的子项?

上述模态中的计划、要求和完成的学分来自另一个控制器，因此可以忽略！

【问题讨论】：

标签： angularjs angular-ui-bootstrap

【解决方案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。使用 $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;
};

【讨论】：

【解决方案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;
}

【讨论】：