Question

我很确定这是一个非常简单的问题需要解决，但是我被卡住了。我有一个模态angularjs打开一个具有Select元素的表单，其他需要使用Array / JSON值填充。对于某些人来说，我无法从ModalForm控制器或主页面控制器传递这些值。我创建了这个Plunker来重现这个问题。

主页面代码是：

ion-toolbar {
        div.toolbar-background {
            background-image: url('../img/tresemme.png') !important;
        background-repeat: no-repeat;
            background-size: cover;

        }
    }

.itemadspace {
        z-index: 1;
        top: 0;
        left: 0;
        text-align: center;
        height: 88px;
    }

.pluscontainer {
        position: absolute;
        z-index: 2;
        right: 10px;
        top: 28px;
    }

.plussy {
        font-size: 72px;
        font-weight: 700;
        color: map-get($colors, primary);
        /*position: relative;*/
    }

.toolbarstyle {
        font-size: 12px;
        padding: 0 0.5em;
        color: gray;
        background-color: black;
    }

#iontoolbar {
        z-index: 1;
        position: absolute;
        top: 88px;
        left: 0;
        background-color: black;
        color: white;
        border-bottom-style: solid;
        border-bottom-color: map-get($colors, primary);
        border-bottom-width: 4px;
    }

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

打开我！从模态中选择：{{$ ctrl.selected}}

模态形式是：

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

Answer 1

当您使用controllerAs语法时，对于范围内的访问对象或函数，您应该使用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

如何将数组/ json值传递给angularjs模式上的select

1 个答案: