Question

我是angular.js的新手。我必须在模态中显示所选的输入值，但我不会成功。我有以下输入：

   <form>
      <input type="radio" name="toggleDiv" value="show" ng-click="show()"   checked/> Show Text
                <br>
                <input type="radio" name="toggleDiv" ng-click="hide()" value="hide"/> Hide Text
            </form>

我必须打开一个弹出对话框并显示所选值的值。情绪化：

  <div class="row" ng-controller="ModalDemoCtrl">
                <script type="text/ng-template" id="myModalContent.html">
                    <div class="modal-header">
                        <h3 class="modal-title">I'm a modal!</h3>
                    </div>
                    <div class="modal-body">
                        {{ inputsVal }}
                    </div>
                </script>

                <button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
        </div>

我尝试以下功能：

    app.controller('ModalDemoCtrl', function ($scope, $uibModal) {
  $scope.open = function () {
           $scope.inputsValue=$('input:checked').val()
           return $scope.inputsValue
}}
    }

Answer 1

你的实现是错误的。检查anguar ui bootstrap modal documentation。

你必须这样做

$scope.open = function () {
var modalInstance = $uibModal.open({
  animation: $scope.animationsEnabled,
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  resolve: {
    items: function () {
      return $scope.myForm;
    }
  }
});

在你的控制器中，

app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {

  $scope.items = items;

  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
});

in html，

<script type="text/ng-template" id="myModalContent.html">
                    <div class="modal-header">
                        <h3 class="modal-title">I'm a modal!</h3>
                    </div>
                    <div class="modal-body">
                        {{ items.input}}
                    </div>
                </script>
<form>
      <input type="radio" name="toggleDiv" ng-model="myForm.input" value="show" ng-click="show()"   checked/> Show Text
                <br>
                <input type="radio" name="toggleDiv" ng-click="hide()" value="hide"/> Hide Text
            </form>

修改

如果你想使用jquery方式，那么你需要使用$ apply（）

$scope.$apply(function () { $scope.inputsValue=$('input:checked').val(); });

希望这有助于.. :)）

Angular-ui bootstrap-如何在模态中显示所选输入值？

1 个答案: