Can't access ng-model in $ionicPopup template


#1

I have a popup I want to use to add items to a list.

The popup code looks like this:

  var myPopup = $ionicPopup.show({
  template: '<input type="text" ng-model="itemName"></br><input type="number" ng-model="itemNumber">',
  title: 'New item',
  subTitle: 'Add new item to list',
  scope: $scope,
  buttons: [
    { text: 'Cancel' },
    {
      text: '<b>Save</b>',
      type: 'button-positive',
      onTap: function(e) {
        
      }
    }
  ]
});

I try to access the value in “itemName” and “itemNumber” to add to a object array. I try to use $scope.itemName and just itemName as variables, but it only return “undefined” even though text is inputed to the input field.

What am I doing wrong?


#2

Have you tried to use an object rather 2 simple values ?

item.name and item.number and initialize $scope.item = {}


#3

But how do I give the variables (item.name and item.number) the value from the input (ng-model)?


#4

I figured it out now. I had to change the ng-model to include the object.

 $scope.showPopup = function() {

 $scope.newitem = {}

var myPopup = $ionicPopup.show({
  template: '<input type="text" ng-model="newitem.itemName"></br><input type="number" ng-model="newItem.itemNumber">',
  title: 'New item',
  subTitle: 'Add new item to list',
  scope: $scope,
  buttons: [
    { text: 'Cancel' },
    {
      text: '<b>Save</b>',
      type: 'button-positive',
      onTap: function(e) {
        alert($scope.newitem.itemName);
      }
    }
  ]
});
}

#5

And does it work now?


#6

Yes. Now I only have to figure out how to get image urls from Google Images. :stuck_out_tongue:


#7

Thank you. It saves my time.