CODEWITHSUNDEEP
angularjsangularjs-scope
Uttam Panara
Uttam Panara

Reputation: 549

How to access ng-model value in controller of popup model in angular?

I want to access an ngModel from within a controller, but here the ngModel is defines in a popup input field. I want to access the qty and name values in controller. Note that this whole code is model popup.

Model code

<ion-modal-view> 
    <ion-header-bar>
        <h1 class="title">Item Details</h1>
    </ion-header-bar>
    <ion-content padding="true">
        <form ng-submit="addItem()">
            <div class="list list-inset">
                <label class="item item-input">
                    <span class="input-label">Name</span>
                    <input type="text" name="name" ng-model="name">
                </label>
                <label class="item item-input">
                    <span class="input-label">Qty</span>
                    <input type="number" name="qty" ng-model="qty">
                </label>
                <div class="padding item text-center">
                    <button class="button button-dark">Add To Cart</button>
                    <a class="button  button-assertive" ng-click="closeModal()">Cancel</a>            
                </div>
            </div>
        </form>
    </ion-content>
</ion-modal-view>

Controller code

.controller('GuestDetailsCtrl', function($scope){
    $scope.addItem = function() {
        alert($scope.name);
        alert($scope.qty);
    }; 
});

Upvotes: 3

Views: 27588

Answers (1)

carton
carton

Reputation: 1168

You could try to give params in the function like this :

<ion-modal-view> 
<ion-header-bar>
    <h1 class="title">Item Details</h1>
</ion-header-bar>
<ion-content padding="true">
    <form ng-submit="addItem(params)">
        <div class="list list-inset">
            <label class="item item-input">
                <span class="input-label">Name</span>
                <input type="text" name="name" ng-model="params.name">
            </label>
            <label class="item item-input">
                <span class="input-label">Qty</span>
                <input type="number" name="qty" ng-model="params.qty">
            </label>
            <div class="padding item text-center">
                <button class="button button-dark">Add To Cart</button>
                <a class="button  button-assertive" ng-click="closeModal()">Cancel</a>            
            </div>
        </div>
    </form>
</ion-content>

And in your controller : 

   .controller('GuestDetailsCtrl', function($scope){
      $scope.addItem = function(params) {
          alert(params.name);
          alert(params.qty);
      }; 
  });

Upvotes: 7

Related Questions