Jquery boostrap模式，angularjs ng单击获取按钮值

我有一个按钮，用于打开带有列表（层次结构）的引导模式。我希望将所选列表li值显示为按钮值，并将其放入

$scope

这里是JSFIDLE的链接，以了解我的需要。

---

您需要做的事情可以通过使用库来实现，特别是它的指令

您不需要使用jQuery进行任何类似于您在小提琴中所做的事情

编辑：以下是一个示例，说明您需要做什么

JavaScript

HTML

分割选择

{{category.name}

{{segment.name}

{{value.name}



选定：{{Selected.name}
好啊
取消
{{selected？selected.name:'Segmentation'}

Brilliant，thnx Uzair，如果您可以在一个控制器中完成此操作！

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

<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>