引导模式，angularjs 单击获取按钮值

Question

我有一个按钮可以打开一个带有列表（层次结构）的 bootstrap 模态我想要选择列表 li 值并显示为 $scope 中的按钮值这是 link jsfiddle 来了解我的需要。 jsfiddle

Answer 1

你需要做的可以通过使用ui-bootstrap library, specifically its modal指令来实现。

您不需要像在 fiddle 中那样使用 jQuery。

编辑：这里有一个plunk作为您需要做的事情的例子。

JavaScript

angular
.module('modalDemo', ['ui.bootstrap'])
.controller('DemoCtrl', function ($scope, $modal) {

    console.log("in angular");

    $scope.selected = { name: 'none' };

    $scope.open = function() {

        var modalInstance = $modal.open({
          templateUrl: 'myModalContent.html',
          controller: 'ModalInstanceCtrl',
          size: 'lg'
        });

        modalInstance.result.then(function (selectedItem) {
          $scope.selected = selectedItem;
        });
    };
})
.controller('ModalInstanceCtrl', function ($scope, $modalInstance) {

    $scope.setSelectedSegment = function (value) {

        $scope.selected = value;
        $modalInstance.close($scope.selected);
    };

    $scope.categoryList = [
        { name: 'Catégorie 1' },
        { 
            name: 'Catégorie 2',
            segments: [
                { 
                    name: 'Segment 1',
                    values: [
                        { name: 'Valuer 1' },
                        { name: 'Valuer 2' }
                    ]
                },
                { name: 'Segment 2' }
            ]
        },
        {
            name: 'Catégorie 3',
            segments: [
                { name: 'Segment 1' },
                { name: 'Segment 2' }
            ]
        },
        { name: 'Catégorie 4' },
        { name: 'Catégorie 5' }
    ];
});

HTML

<div class="container" ng-app="modalDemo">
  <div ng-controller="DemoCtrl" class="container">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">Sélection de la segmentation</h3>
        </div>
        <div class="modal-body">
            <div class="dd" id="nestable">
                <ol class="dd-list">
                    <li class="dd-item" ng-repeat="category in categoryList">

                        <div class="dd-handle">{{ category.name }}</div>

                        <ol class="dd-list" ng-if="category.segments">
                            <li class="dd-item" ng-repeat="segment in category.segments">

                                <div class="dd-handle">{{ segment.name }}</div>

                                <ol class="dd-list" ng-if="segment.values">
                                    <li class="dd-item" ng-repeat="value in segment.values">
                                        <div class="dd-handle" value="valeur1" ng-click="setSelectedSegment(value)">{{ value.name }}</div>
                                    </li>
                                </ol>
                            </li>
                        </ol>
                    </li>

            Selected: <b>{{ selected.name }}</b>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </script>
    <button class="btn btn-default" ng-click="open()">{{ selected ? selected.name : 'Segmentation' }}</button>
  </div>
</div>

引导模式，angularjs 单击获取按钮值

boostrap modal, angularjs ng-click get button value

jquery

angularjs

bootstrap-modal