Ng-click fires twice & ng-model is undefined

ionic-v1
1

seems like odd behavior but when i click on the ng-click and i look at my output in the console and the ng-
model is also undefined:

RESULTS
qry: undefined
qry: undefined

HTML

<div class="list">
  <div class="item item-input-inset">
  <label class="item-input-wrapper">
    <i class="icon ion-search placeholder-icon"></i>
    <input type="text" placeholder="Address, City, State or Zip" ng-model="query" />
  </label>
  <button class="button button-small" ng-click="search()">
    Search
  </button>
  </div>
</div>

CONTROLLER

.controller('HomeCtrl', function($scope, $location) {
	$scope.search = function() {
		console.log('qry: ' + $scope.query);
		// location path to my search page passing in query param /search/:searchId ($scope.query)
	}
})
2

ugh, darn pre tags didn’t work for my html and i’m trying to fix it but it’s telling me that i have already posted the same code so i can’t make an update. if you can fix my post pleae do, also where is the option to delete my original posting of the topic?

3

thanks to @max for catching my use of a primitive when I should’ve been using an object $scope.data = {}; and ng-model=“data.query” as that did work and is considered a best practice.

i’m still getting the firing twice of my ng-click=“search()” when i output to the controller.

4

What browser does it fire twice on? Desktop Chrome, Android 4.2, iOS7? I’m working on that right now and trying to replicate the issue. Thanks.

5

I’m using Icenium to do my mobile development and have pulled in all of your seed code and modified it from there. I have it set for Android v4.2 currently for testing. I haven’t tested it using webstorm + chrome but I will also do that as I didn’t think it would matter if I used Icenium but as you pointed out, maybe it does. I will let you know.

6

@adam it looks like it’s an issue with Icenium as I see the ng-click show my query value twice in the console but when I use brackets and chrome to run my app, it’s only showing one query via ng-click. thanks for that suggestion to look there as i didn’t think Icenium would’ve been the problem. I’ll take it up with them.

7

Also, if you could try the nightly build I made a small change to the tap/click feature, hopefully this solves your issue: http://code.ionicframework.com/#nightly

8

No work.

Please fix it.

value is “undefined” on GET VALUE

Help.

9

@keyner Would you be able to provide a plunkr and describe how to replicate the issue? Thanks.

10

Sorry @adam,

I fixed.

<label class="item item-input">
        <input type="number" style="text-align: right;" ng-model="variable1">
      </label>
      <button class="button button-block button-positive" ng-click="someFunction(variable1)">
        Calculate
      </button>

then:

...
.controller('MyController', function($scope) {
	$scope.someFunction = function(variable1) {
                alert(variable1); // works
	};
});
....

Works!!!

11

Just wrote a reply on another thread about the double click problem. I’m also experiencing it with Chrome 32.0.1700.107

For me, the tap simulation is artificially firing the click event and then the native click event kicks in, producing a double call on the callback defined in any ng-click.

Sorry for the misplaced post… Maybe I should copy it in this thread.

12

Hello @adam,

I have this issue, ng-submit or ng-click fire twice, I’m using rc1, my IPAD 2 ios 7, and chrome (lastest osx). Any workaround? This two ways fires stsearch() twice.

      <div class="item item-input-inset">
        <label class="item-input-wrapper">
          <input ng-model="data.searchData" type="text" placeholder="Digite sua pesquisa">
        </label>
        <button class="button button-small"  ng-click="stsearch()" > pesquisar
        </button>
      </div>

Another way

   <form ng-submit="stsearch()">
    <div class="list">
      <div class="item item-input-inset">
        <label class="item-input-wrapper">
          <input ng-model="data.searchData" type="text" placeholder="Digite sua pesquisa">
        </label>
       <button class="button button-small" type="submit"> pesquisar
        </button>
      </div>
    </div>
    </form>

EDIT: the problem is fixed with the http://code.ionicframework.com/nightly/js/ionic.bundle.min.js
:disappointed_relieved: