Question

我的问题是：

在模态中，我有一个带有表格的手风琴，

1-当我点击下一步按钮时，我必须填写输入字段以打开下一步。

2 - 当我打开下一步时，下一个按钮消失，并出现上一个和保存按钮。

但是当我点击 One 步时，手风琴会打开并关闭两个手风琴，但按钮不会消失，相反，当我点击两个手风琴时。

点击手风琴后如何更改按钮？

提前感谢您的所有答案。

我的例子：http://plnkr.co/edit/HMSBYTw1BgDakH3nXqw2?p=preview

HTML：

<form ng-submit="submit(myform)" name="myform" novalidate>
  <div class="modal-header">
    <button type="button" type="button" class="close" data-dismiss="modal" ng-click="cancel()"><span aria-hidden="true">&times;</span></button>
    <h3 class="modal-title">I'm a modal!</h3>
  </div>
  <div class="modal-body">
    <uib-accordion close-others="oneAtATime">
      <uib-accordion-group is-open="status.isFirstOpen">
        <uib-accordion-heading>
          first step
        </uib-accordion-heading>
        <label>firstname</label>
        <input type="text" name="firstname" ng-model="firstname" required>
      </uib-accordion-group>
      <uib-accordion-group is-open="status.isSecondOpen" is-disabled="status.isSecondDisabled">
        <uib-accordion-heading>
          second step
        </uib-accordion-heading>
        <label>lastname</label>
        <input type="text" name="lastname" ng-model="lastname" required>
      </uib-accordion-group>
    </uib-accordion>
  </div>
  <div class="modal-footer">
    <button ng-show="!viewNext" class="btn btn-primary" type="submit" ng-click="next()">Next</button>
    <button ng-show="viewNext" class="btn btn-default" type="submit" ng-click="save()">Save</button>
    <button ng-show="viewNext" class="btn btn-primary" type="button" ng-click="prev()">prev</button>
  </div>
</form>

App.js：

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function($scope, $uibModalInstance) {
 $scope.oneAtATime = true;

  $scope.status = {
    isFirstOpen: true,
    isSecondOpen: false,
    isSecondDisabled: true
  };

  $scope.next = function() {
    if ($scope.myform.firstname.$valid) {
      $scope.status = {
        isSecondOpen: true,
        isFirstOpen: false,
        isSecondDisabled: false
      };
       $scope.viewNext = true;
    }
  };

  $scope.prev = function() {
    $scope.status = {
      isSecondOpen: false,
      isFirstOpen: true
    };
   $scope.viewNext = false;
  };

  $scope.save = function() {
    if($scope.myform.$valid) {
      alert('Save and Valid !');
       $uibModalInstance.dismiss('close');
    }
  };

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

如何在手风琴中显示按钮（在模态中）

0 个答案: