Strange Ionic Framework behavior with ng-repeat - angularjs

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
Replace the Ionice bundle JS reference with a pure `AngularJS' one as can be seen here in jsfiddle
While keeping the Ionic JS reference, remove the <input>' inside the ng-repeat see jsfiddle
Any 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">
<i class="icon ion-minus-circled"></i>
<div class="item item-input item-button-right" ng-repeat="answer in answers">
<input type="text" ng-model="answer.text" />
<div class="buttons">
Click
</div>
</div>
</div>
</div>

Related

AngularJS ng-keyup fired twice

My input ng-keyup always fires twice, but other events like ng-click etc... are fine.
<div id="pageContent" ng-controller="moduleController" ng-cloak>
<div class="row note-list" ng-if="showList">
<input id="search" ng-keyup="test()" type="text" class="form-control" placeholder="Search" style="margin-bottom:10px">
<div class="col-12" ng-repeat="note in notes" ng-click="editNote(note.id)">
<p class="note-list-title">{{note.title}}</p>
<p class="note-list-date">{{note.dateCreated | displayDate}}</p>
</div>
<div ng-click="newNote()" class="add-btn btn btn-primary"><span class="fa fa-plus"></span></div>
</div>
<div ng-if="!showList" class="note-editor">
<div>
<div ng-click="back()" class="btn btn-primary"><span class="fa fa-arrow-left"></span></div>
<div ng-click="save()" class="btn btn-primary" style="float:right"><span class="fa fa-check"></span></div>
</div>
<h1 contenteditable="true" id="title">{{selected.title}}</h1>
<div contenteditable="true" class="note-container" ng-bind-html="selected.note" id="note"style="white-space: pre-line;"></div>
</div>
</div>
<script>
app.controller('moduleController', moduleController);
function moduleController($scope, $http, $window) {
......
$scope.test = function() {
console.log("TEST");
}
}
</script>
Why is this happening? What are the possible cause of it?
One approach to debugging problems with event handlers is to look at the $event object:
<input ng-keyup="test($event)">
$scope.test = function(ev) {
console.log(ev);
};
Directives like ngClick and ngFocus expose a $event object within the scope of that expression. The object is an instance of a jQuery Event Object when jQuery is present or a similar jqLite object.
For more information, see
AngularJS Developer Guide -- $event

How to use Bootstrap tooltip in Angularjs ng-repeat for div

<div data-ng-repeat="provider in providers">
<div>
<input type="checkbox" data-toggle="tooltip" data-placement="top"
data-original-title="Default tooltip"/>
<b>Add to compare</b>
</div>
</div>
If using this code under ng-repeat it is not working.If im using without ng-repeat it is working.
This is because the attribute used for Bootstrap Tooltip Title is "title" and not "data-original-title"
You can use
Html
<div data-ng-repeat="provider in providers">
<div>
<input type="checkbox" data-toggle="tooltip" data-placement="right" title="Provider {{provider}}" />
<b>Add to compare</b>
</div>
</div>
Angular
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
// Check/uncheck all boxes
$scope.providers = [1,2,3,4,5,6];
});
Refer Plunker
Refer Bootstrap Tooltip

Ionic - Populate an ion-list when button is clicked

I have an ionic list. I want to bind data to the list when a button is clicked.
$scope.searchY = function(){$scope.youtubeParam = {
key: 'myKey',
type: 'video',
maxResults: '10',
part: 'id,snippet',
q: $scope.searchKey ,
order: 'date',};
$http.get('https://www.googleapis.com/youtube/v3/search', {params:$scope.youtubeParam}).success(function(response){
$scope.myVideos = response.items;
angular.forEach(response.items, function(child){
console.log (child);
});
});
I put an event on my search TextBox like this.
<ion-content>
<div>
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-enter="searchY()" ng-model="searchKey">
</label>
</div>
<!--<div class="embed-responsive embed-responsive-16by9"><youtube-video video-id="theBestVideo"></youtube-video></div>-->
<div data-ng-controller="AppCtrl" class="list card" ng-repeat="video in myVideos">
<div class="item item-text-wrap">
<h2>{{video.snippet.title}}</h2>
<p>{{video.snippet.publishedAt | limitTo: 10}}</p>
</div>
<div class="item item-image">
<div class="embed-responsive embed-responsive-16by9"><youtube-video class="embed-responsive-item" video-id="video.id.videoId" player-vars="playerVars"></youtube-video></div>
</div>
<div class="item item-divider">
<button class="button button-outline button-block button-positive">
Share this Video
</button>
</div>
</div>
</ion-content>
When I do a search I can see that there are returned results and the $scope.myVideos variable is not empty. But its not getting binded with the list card. Please what am I doing wrong. Been on this for days. it works if I call the function directly without doing a search. Thanks
Every controller creates a new scope, so your search box and your video list are looking at different scopes. When you modify myVideos from the scope the search box is looking at, the changes won't be reflected in the scope that the AppCtrl is looking at.
Try moving ng-controller="AppCtrl" to the ion-content tag, then when you search returns, you can modify the correct scope and the changes should be reflected in the ionic list.

Semantic UI radio buttons fields does not work with Angular JS

I'm having an issue(the databinding does not work) when I tried to integrate angular js with semantic ui, specially if I'm using radio buttons fields like code bellow:
the html
<div ng-controller="MyCtrl">
<div class="ui form">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" ng-model="value" value="foo" ng-change="newValue(value)">
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" ng-model="value" value="boo" ng-change="newValue(value)">
</div>
</div>
</div>
{{value}}
</div>
and the controller
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.value= 'foo';
$scope.newValue = function(value) {
console.log(value);
}
}
I think you are missing a controller:
myApp.controller('MyCtrl', function() {});
then you should place all your logic inside it, otherwise I am not sure that data recycling will work without using $apply to collect it.
You need a directive to have data binding with radio button,
this can be useful SemanticUI-Angular-checkbox

Button inside the label with the input does not trigger ng-click

That's my code:
<label class="item item-input " style="height: 10%" ng-click="publish()">
<input type="text" placeholder="Title" ng-model="title">
<i ng-click="publishBlog()" class="button button-clear icon ion-paper-airplane padding-right"></i>
</label>
The "publish()" can be triggered,but not the "publishBlog()".The ionic will put the icon into the .Does the ionic cause it?
within "label" tag your click event will not work, because label is overriding your button click.
so, use DIV instead of label , that will work fine.
As Hardy said, you will have to use div instead of label. But you will be required to use $event.stopPropagation(); to make sure only publishBlog() gets called. Without $event.stopPropagation();, both the functions will get called.
So, here's a sample implementation:
<ion-content class="padding" ng-controller="my">
<div class="item item-input " style="height: 10%" ng-click="publish($event)">
<input type="text" placeholder="Title" ng-model="title">
<i ng-click="publishBlog($event)" class="button button-clear icon ion-paper-airplane padding-right"></i>
</div>
</ion-content>
And your controller:
.controller("my", function($scope){
$scope.publish = function($event) {
alert("title");
};
$scope.publishBlog = function ($event) {
$event.stopPropagation();
alert("icon");
};
});
Here's a demo: http://play.ionic.io/app/1b82ce25ca44

Resources