I have an ng-repeat
with a button inside which calls a controller method.
I'm using the Ionic Framework
which is based on AngularJS
I can't get the button to actually trigger the controller method unless I revert to using plain Angular (or one more variant, which I will show later).
My example of the broken situation can be seen here in jsfiddle.
You can see that the red button works (generates an alert) and the green, inside the ng-repeat
doesn't, while it is calling the exact same controller function.
Here is the controller code:
angular.module('todoApp', [])
.controller('TodoController', ['$scope', function($scope) {
var answers = [];
addOptionToArray("Option 1");
addOptionToArray("Option 2");
addOptionToArray("Option 3");
$scope.answers = answers;
$scope.doSomething = function() {
alert("clicked");
};
function addOptionToArray(optionText) {
answers.push({text : optionText});
}
}]);
and the page layout:
<div ng-app="todoApp">
<div ng-controller="TodoController">
<button class="button button-assertive" ng-click="doSomething()">
<i class="icon ion-minus-circled"></i>
</button>
<label class="item item-input item-button-right" ng-repeat="answer in answers">
<input type="text" ng-model="answer.text">
<div class="buttons">
<button class="button button-balanced" ng-click="doSomething()">
<div>click</div>
</button>
</div>
</label>
</div>
</div>
Now there are two thins that will make the button inside the ng-repeat
work again
Ionice
bundle JS reference with a pure `AngularJS' one as can be seen here in jsfiddle<input>'
inside the ng-repeat
see jsfiddleAny idea of why having the <input>
inside the ng-repeat
breaks the button's ng-click
?
Or what is broken in Ionic
?
Your problem is with block elements inside inline elements. Don't put <div>
inside <button>
or <label>
. Fix it and it works as expected:
<div ng-app="todoApp">
<div ng-controller="TodoController">
<a href="#" class="button button-assertive" ng-click="doSomething()"><i class="icon ion-minus-circled"></i></a>
<div class="item item-input item-button-right" ng-repeat="answer in answers">
<input type="text" ng-model="answer.text" />
<div class="buttons">
<a href="#" class="button button-balanced" ng-click="doSomething()">Click</a>
</div>
</div>
</div>
</div>