I want to pass parameters to ons-modal

I want to give the parameters when displaying modals in monaca's onseneUI so that they can be displayed, but it doesn't work.
I have read the official reference, but I am not sure because there are no specific examples.
Please tell me how to pass and retrieve parameters.

Current Code

<ons-page>

  <div ng-click="modal.show({num:1});">show</div>
  
  <ons-modal var="modal" animation="lift" direction="up">
    <div>{{modal.num}}</div>
  </ons-modal>

</ons-page>

monaca onsen-ui angularjs

2022-09-29 21:25

1 Answers

ons-page specifies the controller and provides the property modalText to display above ons-modal.
You can call the modal display method showModal() and rewrite modalText to display the modal.

var app=ons.bootstrap("myApp", "onsen");
app.controller("testController", function($scope,$timeout){
  $scope.modalText="";
  ons.ready(function(){
  });
  $scope.showModal=function(msg){
    $scope.modalText=msg;
    $scope.myModal.show();
    $timeout(function(){
      $scope.myModal.hide();
    }, 3000);
  };
});

<link href="https://unpkg.com/onsenui@latest/css/onsenui.css"rel="stylesheet"/>
<link href="https://unpkg.com/onsenui@latest/css/onsen-css-components.css"rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js"></script>
<script src="https://unpkg.com/onsenui@latest/js/onsenui.js"></script>
<script src="https://unpkg.com/onsenui@latest/js/angular-onsenui.js">/script>
<ons-pageing-controller="testController">
  <ons-toolbar>
    <div class="center">ons-modal</div>
  </ons-toolbar>
  <ons-list>
    <ons-list-item>
      <ons-buttoning-click="showModal('Please wait') " > Wait </ons-button >
    </ons-list-item>
    <ons-list-item>
      <ons-buttoning-click="showModal('Just a moment')">Just a moment</ons-button>
    </ons-list-item>
  </ons-list>
  <ons-modal var="myModal" animation="lift" direction="up">{{modalText}}</ons-modal>
</ons-page>

2022-09-29 21:25

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656