boostrap modal，angularjs ng-click獲得按鈕值

Question

我有一個按鈕，打開引導程序模式與列表（層次結構）我想要選擇列表li值並顯示爲按鈕值放在$scope 這裏是鏈接jsfiddle瞭解我的需要。 jsfiddle

Answer 1

你需要做什麼可以用ui-bootstrap庫，特別是其modal指令來實現。

你不需要使用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>