Access values of input fields in modal view

1

I have a input slider in a modal and on a button click I would like to read out the value and forward it to a function. I tried binding it with ng-model and setting the controller to the controller of the parent with ng-controller, but this creates an seemingly infinity loop - the page doesnt finish loading - so I ditched this approach.
How can I access my value and forward it to the controller?
This code here doesn’t really work, but works for input forms in a legit html page.

In the parent I have

$ionicModal.fromTemplateUrl('./myModal.html', {
	scope: $scope
}).then(function(modal) {
	$scope.modal = modal;
});

$scope.closeDifficultyModal = function() {
    $scope.modal.hide();
    doSomethingWith($scope.myParameter);      
}

$scope.myParameter is always undefined.

In the modal I have

<div class="item item-text-wrap">
    <div class="range range-positive">
	  	<input type="range" min="0" max="100" value="50" ng-model="myParameter">  
  	 </div>
  	 <button class="button button-block button-balanced" ng-click="closeModal()">
  			Do it
	 </button>
2

Try to use an object instead of a variable. like $scope.params.myParameter instead of $scope.myParameter. initialize it in your controller first

$scope.params = {}

And add it as model to your input

ng-model="params.myParameter"
3

Thanks, that solved it! :slight_smile:
I simply bound it to $scope.modal.

4

Help me, i have same issue, in my modal i have many input and a button but in function button i obtain always undefined… what can i do?

5

pass $scope to the modal. And create ng-models at your modal. at your modal create a function on button click. which will pass back the values to the controller

//define modal and pass scope
     $ionicModal.fromTemplateUrl('templates/modals/shopmodal.html', {
          scope: $scope,
          animation: 'slide-in-up'
        }).then(function(modal) {
          $scope.modal = modal;
        });

        $scope.openModal = function(link,fotoid) {

          console.log(fotoid)
          $scope.fotoid=fotoid;
          $scope.link=link;
          $scope.modal.show();
        };
        $scope.closeModal = function() {
          $scope.modal.hide();
        };

//Modal itself
    <ion-modal-view>
      <ion-header-bar>
        <h1 class="title">!!!</h1>
        <div class="button button-clear" ng-click="modal.hide()"><span class="icon ion-close"></span></div>
      </ion-header-bar>
      <ion-content>
        <ion-card>
          <img ng-src="{{link}}" class="centerimg" style="width:40%;height:40%"/>
          <ion-card-content>
            <ion-card-title>

            </ion-card-title>
            <p>
             !!!
            </p>
          </ion-card-content>
        </ion-card>

        <div class="list">

          <label class="item item-input item-stacked-label">
            <span class="input-label">sad</span>
            <input type="text"  ng-model="sad">
          </label>
          <label class="item item-input item-stacked-label">
            <span class="input-label">asd</span>
            <input type="text" ng-model="asd">
          </label>
        </div>
        <button class="button button-full button-calm" ng-show="asd.length>0" ng-click="iamatcontrollernow(asd,sad)">
          Puan Ver
        </button>
      </ion-content>
    </ion-modal-view>

//return controller
    $scope.iamatcontrollernow=function(){
          
        //your scope values here now..
          })
        }

but remember you have to define $scope.asd and $scope.sad before the function for ng-model

6

Thank you very much, I try it tomorrow