anglejsモダルの選択に配列/ json値を渡す方法

Question

私はこれを解決するのは非常に簡単な問題だと確信していますが、私は立ち往生しています。私は、Select要素とArray/JSON値を使用して設定する必要がある他の要素を持つフォームを開くモーダルanglejsを持っています。どのようにして、私はModalFormコントローラまたはメインページコントローラのいずれかからこれらの値を渡しています。私は問題を再現するこのPlunkerを作成しました。

メインページのコードは次のとおりです。

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']); 
 
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function($uibModal, $log, $document) { 
 
    var $ctrl = this; 
 
    $ctrl.items = ['item1', 'item2', 'item3']; 
 

 
    $ctrl.animationsEnabled = true; 
 

 
    $ctrl.open = function() { 
 
    var modalInstance = $uibModal.open({ 
 
     animation: $ctrl.animationsEnabled, 
 
     ariaLabelledBy: 'modal-title', 
 
     ariaDescribedBy: 'modal-body', 
 
     templateUrl: 'rostaDetail.html', 
 
     controller: 'ModalInstanceCtrl', 
 
     controllerAs: '$ctrl', 
 
     resolve: { 
 
     items: function() { 
 
      return $ctrl.items; 
 
     } 
 
     } 
 
    }); 
 

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

 

 
}); 
 

 
// Please note that $uibModalInstance represents a modal window (instance) dependency. 
 
// It is not the same as the $uibModal service used above. 
 

 
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function($uibModalInstance, items) { 
 
    var $ctrl = this; 
 
    $ctrl.items = items; 
 
    $ctrl.selected = { 
 
    item: $ctrl.items[0] 
 
    }; 
 

 
    $ctrl.ok = function() { 
 
    $uibModalInstance.close($ctrl.selected.item); 
 
    }; 
 

 
    $ctrl.cancel = function() { 
 
    $uibModalInstance.dismiss('cancel'); 
 
    }; 
 
});

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-animate.js"></script> 
 
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script> 
 
<script src="example.js"></script> 
 
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 

 
<div ng-controller="ModalDemoCtrl as $ctrl" class="modal-demo"> 
 
    <button type="button" class="btn btn-default" ng-click="$ctrl.open()">Open me!</button> 
 
    <div ng-show="$ctrl.selected">Selection from a modal: {{ $ctrl.selected }}</div> 
 
    <div class="modal-parent"> 
 
    </div> 
 
</div>

私を開きます！ モーダルから選択：{{$ ctrl.selected}}

そしてモーダルフォームがある：あなたがそうアクセスオブジェクトや関数に対してcontrollerAs構文を使用されるように

<!-- .Modal Form Edit Rosta --> 
 

 
<div class="modal-header"> 
 
    <h3 class="modal-title" id="modal-title">Edit Roster</h3> 
 
</div> 
 
<div class="modal-body" id="modal-body"> 
 
    <form class="form-horizontal"> 
 
     <fieldset> 
 
      <div class="form-group"> 
 
       <label class="col-md-4 control-label" for="selectDuty">Select Duty</label> 
 
       <div class="col-md-4"> 
 
        <select id="selectDuty" name="selectDuty" ng-model="item" ng-options='item in items' class="form-control"></select> 
 
       </div> 
 
      </div> 
 
      <!-- Multiple Checkboxes --> 
 
      <div class="form-group"> 
 
       <label class="col-md-4 control-label" for="checkboxes">Multiple Checkboxes</label> 
 
       <div class="col-md-4"> 
 
        <div class="checkbox"> 
 
         <label for="checkboxes-0"> 
 
         <input name="checkboxes" id="checkboxes-0" value="1" type="checkbox"> 
 
         Option one 
 
        </label> 
 
        </div> 
 
       </div> 
 
      </div> 
 

 
      <div class="modal-footer"> 
 
       <!-- Button (Double) --> 
 
       <div class="form-group"> 
 
        <!-- <label class="col-md-4 control-label" for="button1id">Double Button</label> --> 
 
        <div class="col-md-8"> 
 
         <button id="buttonSave" name="buttonSave" class="btn btn-primary" ng-click="$ctrl.ok()">Save</button> 
 
         <button id="buttonDelete" name="buttonDelete" class="btn btn-danger" ng-click="$ctrl.delete()" ng-show="false">Delete</button> 
 
         <button type="button" class="btn btn-basic" ng-click="$ctrl.cancel()">Cancel</button> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </fieldset> 
 
    </form> 
 
</div>

Answer 1

範囲内ではcontrollerAs変数と.を使用する必要があります。ここに$ctrl。

このようにする必要があります。

ng-options='item as item for item in $ctrl.items' 

とコントローラで：

$ctrl.ok = function() { 
    $ctrl.selected = { 
     item: $ctrl.item 
    }; 
    $uibModalInstance.close($ctrl.selected.item); 
}; 

Demo