ng-click not working inside item in Ionic app - javascript

I am not able to get the ng-click event to trigger when inside an item in a ionic modal that pops up. When I click on an item I see it turn gray so it seems like it is registering the click but I have a console.log statement as the first line in my joinGroup function and nothing is output to the console.
I also tried using the ion-list and ion-item elements but those didn't work either.
<ion-modal-view>
<ion-header-bar class="bar bar-header bar-balanced">
<h1 class="title">Join Court</h1>
<button class="button button-clear button-primary" ng-click="modal.hide()">Done</button>
</ion-header-bar>
<ion-content class="padding">
<div class="list">
<div class="item item-icon-right" ng-repeat="group in groups" ng-click="joinGroup(group)">
<h2>{{group.name}}</h2>
<p>{{group.address}}</p>
</div>
</div>
</ion-content>
</ion-modal-view>
var joinGroup = function (group) {
console.log("Call joinGroup");

try this
<ion-modal-view>
<ion-header-bar class="bar bar-header bar-balanced">
<h1 class="title">Join Court</h1>
<button class="button button-clear button-primary" ng-click="modal.hide()">Done</button>
</ion-header-bar>
<ion-content class="padding">
<ion-list ng-repeat="group in groups" >
<ion-item ng-click="joinGroup(group)">
<h2>{{group.name}}</h2>
<p>{{group.address}}</p>
</ion-item>
</ion-list>
</ion-content>
</ion-modal-view>
In your controller try to do with $scope when writing function like this.
$scope.groups = [];
$scope.joinGroup = function(){
//do your stuff here
}

I assume you did not connect your view with your controller correctly
either you have
.controller('myCtl', myCtl);
function myCtl($scope) {
$scope.groups = [];
$scope.joinGroup = function(args) {};
}
and your view
<div ng-controller="myCtl">
<ion-content class="padding">
<ion-list ng-repeat="group in groups" >
<ion-item ng-click="joinGroup(group)">
<h2>{{group.name}}</h2>
<p>{{group.address}}</p>
</ion-item>
</ion-list>
</ion-content>
</div>
or you can use this approach, which I prefer
.controller('myCtl', myCtl);
function myCtl() {
var vm = this;
vm.groups = [];
vm.joinGroup = function(args) {};
}
view
<div ng-controller="myCtl as vm">
<ion-content class="padding">
<ion-list ng-repeat="group in vm.groups" >
<ion-item ng-click="vm.joinGroup(group)">
<h2>{{group.name}}</h2>
<p>{{group.address}}</p>
</ion-item>
</ion-list>
</ion-content>
</div>

you need to define angular module and angular controller
and put the
app.controller('name',function($scope){
$scope.joinGroup = function(group){
console.log("Call joinGroup");
}
})

Related

Ionic hiding and showing elements ng-show?

New to JS, Ionic framework, AngularJS. I'm trying to work with ng-show && ng-click to display the header on the event of a click on a button. I am still not getting the intended result, any ideas??
Here is my index:
<body ng-app="starter" ng-controller="HomeCtrl as home">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar ng-show="display('on')" class="bar-balanced">
<ion-content>
<ion-nav-back-button class="bar-balanced">
</ion-nav-back-button>
</ion-content>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
My controller:
.controller('HomeCtrl', function($scope) {
$scope.display = function (x) {
if (x == 'on'){
return true;
}
else if (x == 'off'){
return false;
}
}
})
My view:
<ion-view ng-controller="HomeCtrl as home">
<ion-content class="splash">
</ion-content>
<ion-footer-bar class="bar-balanced">
<button ng-click="display('on')" class="button-large button-full button-clear">
<a class="button button-icon icon ion-log-in"href="#/login" >
</a>
</button>
</ion-footer-bar>
</ion-view>
If i have missed anything will edit post with updates**
I see a couple issues here, first of all both the navbar and footer-bar elements should be inside the ng-controller element. This will give the navbar access to the scope to determine if it should be shown or not.
Also, you should use a variable on the scope to determine if the navbar is shown, full example below.
var app = angular.module('myApp', []);
app.controller('HomeCtrl', function($scope) {
$scope.isNavVisible = false;
$scope.displayNav = function(x) {
if (x == 'on') {
$scope.isNavVisible = true;
} else if (x == 'off') {
$scope.isNavVisible = false;
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myApp">
<div ng-controller="HomeCtrl">
<ion-nav-bar ng-show="isNavVisible" class="bar-balanced">
<span>Nav Content</span>
<ion-content>
<ion-nav-back-button class="bar-balanced">
</ion-nav-back-button>
</ion-content>
</ion-nav-bar>
<ion-footer-bar class="bar-balanced">
<button ng-click="displayNav('on')" class="button-large button-full button-clear">
<a class="button button-icon icon ion-log-in" href="#/login">Login</a>
</button>
</ion-footer-bar>
</div>
</html>
If you need to manipulate the nav from multiple controllers you could do that with a service like so
var app = angular.module('myApp', []);
app.service('navService', function() {
this.isNavVisible = false;
});
app.controller('RootCtrl', ['$scope', 'navService',
function($scope, navService) {
$scope.navService = navService;
}
]);
app.controller('HomeCtrl', ['$scope', 'navService',
function($scope, navService) {
$scope.displayNav = function(x) {
if (x == 'on') {
navService.isNavVisible = true;
} else if (x == 'off') {
navService.isNavVisible = false;
}
}
}
])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="RootCtrl">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar ng-show="navService.isNavVisible" class="bar-balanced">
<span>Nav Content</span>
<ion-content>
<ion-nav-back-button class="bar-balanced">
</ion-nav-back-button>
</ion-content>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-view ng-controller="HomeCtrl">
<ion-content class="splash">
</ion-content>
<ion-footer-bar class="bar-balanced">
<button ng-click="displayNav('on')" class="button-large button-full button-clear">
<a class="button button-icon icon ion-log-in" href="#/login">
Login
</a>
</button>
</ion-footer-bar>
</ion-view>
</body>
You should use the ng-click directive to change a value like this:
.controller('HomeCtrl', function($scope) {
$scope.displayItem = false;
$scope.display = function (x) {
if (x == 'on'){
$scope.displayItem = true;
}
else if (x == 'off'){
$scope.displayItem = false;
}
}
})
And then inside your View:
<ion-nav-bar ng-show="displayItem" class="bar-balanced">
<ion-content>
<ion-nav-back-button class="bar-balanced">
</ion-nav-back-button>
</ion-content>
</ion-nav-bar>
Your View, will still the same
<ion-footer-bar class="bar-balanced" ng-controller="HomeCtrl as home">
<button ng-click="display('on')" class="button-large button-full button-clear">
<a class="button button-icon icon ion-log-in"href="#/login" >
</a>
</button>
</ion-footer-bar>
Make sure that both html refers to the same controller. Otherwise you will not have access to the $scope.displayItem property.
In case yo want to share data between different controllers, you should look for another alternative, like a Factory/service or property inside the $rootScope.

Side menu showing empty page Ionic/angularjs

I am trying to add an side menu but what happens is that the top header shows and the page content disappears. I am not sure how to fix it. Can someone please assist me?
in my routes
$stateProvider
.state('jobStore', {
url: '/homePage',
views: {
'side-menu21': {
templateUrl: 'templates/homePage/jobStore.html',
controller: 'jobStoreCtrl'
}
}
})
.state('menu', {
url: '/side-menu21',
templateUrl: 'templates/menu/menu.html',
abstract:true
})
my sidebar is called menu.html
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="side-menu21"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left" id="side-menu21">
<ion-header-bar class="bar-stable">
<div class="title">Menu</div>
</ion-header-bar>
<ion-content padding="false" class="side-menu-left has-header">
<ion-list id="menu-null" class=" ">
<ion-item id="menu-list-item1" ui-sref="menu.home" menu-close="" class=" ">Home</ion-item>
<ion-item id="menu-list-item2" ui-sref="menu.cart" menu-close="" class=" ">Cart</ion-item>
<ion-item id="menu-list-item3" ui-sref="menu.cloud" menu-close="" class=" ">Cloud</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
am i missing some addition in other pages ?
Please go through the code here: Ionic Play - Side Menu.
Your menu state is the first page's state so your jobStore should be a child of this state like menu.jobStore.
In the code, I am activating that sate in the run block using $state.go('menu.jobStore');.

ng repeat list not getting updated when menu and content is in different template (Ionic Framework)

I am working on one ionic framework project.
Where am stuck of list not getting updated. Once menu item is clicked the list should be updated accordingly.
As both things are in different controller I don't have any idea how I can do scope.apply
Below is mine code.
Menu.html
<ion-side-menus enable-menu-with-back-views="true">
<ion-side-menu-content>
<ion-nav-bar class="bar-assertive">
<ion-nav-back-button class="button-clear button-icon ion-ios-arrow-back">
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="mainContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-assertive">
<h1 class="title">Services</h1>
</ion-header-bar>
<ion-content>
<div class="list" ng-controller="serviceCtrl as vm">
<a menu-close class="item item-icon-right item-dark" ng-repeat="services in vm.menu" ng-click="vm.setService(services.id)">
{{services.name}}
<i class="icon ion-ios-arrow-right ion-accessory"></i>
</a>
</div>
<!-- </ion-content> -->
</ion-side-menu>
</ion-side-menus>
Menu services
angular.module('starter').controller('serviceCtrl', ['$state','serviceFactory','$scope','$rootScope', serviceCtrl]);
function serviceCtrl($state, serviceFactory,$scope,$rootScope) {
var vm = this;
var menu = serviceFactory.getService();
vm.menu = menu;
/* var data = serviceFactory.getService();
vm.menu = data.menu;*/
vm.setService = function(menuId){
//$scope.$apply(function() {
//alert('a');
serviceFactory.setService(menuId);
//$scope.subServiceId = menuId;
$state.go('app.sub');
setTimeout(function(){
alert('asdf')
$scope.$apply()
}, 300);
//});
};
};
LIst page that needs to be updated
<ion-view view-title="{{vm.menu[vm.subServiceId-1]['name']}}" ng-controller="subServiceCtrl as vm">
<ion-content>
<div class="list">
<a class="item item-icon-right" ng-repeat="services in lists" ng-click="vm.setSubService(services.sname)">
{{services.sname}}
<i class="icon ion-ios-arrow-right ion-accessory"></i>
</a>
</div>
</ion-content>
</ion-view>
And list controller
angular.module('starter').controller('subServiceCtrl',['$state','serviceFactory','$scope','$rootScope',subServiceCtrl]);
function subServiceCtrl($state,serviceFactory,$scope,$rootScope) {
var vm = this;
//get the sub services
var menu = serviceFactory.getService();
$scope.menua = menu;
var subServiceIda = serviceFactory.actSercice();
vm.subServiceId = serviceFactory.getSelected();
$rootScope.lists = menu[subServiceIda-1].subItems;
alert('as check');
console.log(vm.subServiceId);
alert("First level menu id is "+vm.subServiceId);
vm.menuId = serviceFactory.setFirstId();
//to get the selected sub item. second call to setService()
//$scope.$apply();
if(!$scope.$$phase) $scope.$apply()
vm.setSubService = function(subname) {
serviceFactory.setService(subname);
$state.go('app.next');
//$scope.$apply();
};
};
Ok I ownself solved it.
Just added
cache: false,
in RouterProvider.

Javascript not getting called inside div of ionic template hml file

In my ionic app from the controller I received a json string of comma separated values. I want to display the json string in a html in tabular format. The html is placed inside template directory.
I am calling a java script function from the div of html to achieve this but the js function is not getting hit. The js is included in index.html. What I am doing wrong?
Here is the sample:
the template/shop.html file:
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<!-- Dashboard Tab -->
<ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong">
<ion-view view-title="Shop">
<ion-content>
<ion-list>
<ion-item ng-repeat="shop in shopList">
<!--
<div class="row">
<div class="col col-50 text-center">
<script type="text/javascript">
**createTable({{shop.Method}})**
</script>
</div>
</div>
-->
<div id="Method"></div>
<script>
console.log("Inside div"); **HERE IS THE CALL TO JS FUNCTION**
**createTable({{shop.Method}});**
</script>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
</ion-tab>
<!-- Chats Tab -->
<ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes">
<ion-view view-title="Shop">
<ion-content>
<ion-list>
<ion-item ng-repeat="shop in shopList">
<div class="row">
<div class="col col-50 text-center">
{{shop.Offers}}
</div>
</div>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
</ion-tab>
And here is my smaple JS function placed in utility.js
//function createTable($scope, method){
function createTable(Method){
// var tar=document.getElementById(Method);
// $scope.shopMethod = [];
var table=document.createElement('TABLE');
table.border='1';
var tbdy=document.createElement('TBODY');
table.appendChild(tbdy);
for (var j=0;j<4;j++){
var tr=document.createElement('TR');
tbdy.appendChild(tr);
for (var k=0;k<2;k++){
var td=document.createElement('TD');
td.width='100';
if(k==0) td.innerHTML="School" +(j+1);
else td.innerHTML="Percent" +(j+1);
tr.appendChild(td);
}
}
//tar.appendChild(table);
// <div class="row">
// <div class="col col-50 text-center">
// {{shop.Method}}
// </div>
// </div>
// </div>
// $scope.shopMethod.push(table);
console.log(table);
//document.getElementById(Method).innerHTML="Hello"
}

HTTP.GET isn't working

I'm trying to load a image from a HTTP.GET into my application. I'm unsure why the picture isn't loading.
Here is my code:
Html:
<ion-view view-title="Gallery" align-title="center" ng-controller="photoCtrl">
<ion-content class="center" ng-init="getImages()">
<div class="item item-divider">
<i class="ion-images"></i> Under6/7/8/9s Photos
</div>
<a class="item item-list-detail">
<ion-scroll direction="x">
<img on-hold="onHold()" ng-repeat="image in images" ng-src="images" ng-click="showImages($index)" class="image-list-thumb" />
</ion-scroll>
</a>
</ion-content>
</ion-view>
Javascript:
.controller("photoCtrl", function($scope, $http) {
$scope.data = [];
$scope.getImages = function() {
$http.get('https://api.myjson.com/bins/1jovy')
.success(function(data) {
$scope.data = data;
})
}
});
Add your photoCtrl controller to your view
I saw ng-repeat="data in data", here item and collection is having same name, which is not a good practice....
If I am rewiting this as ng-repeat="img in data" then your ng-src will be like
ng-src="{{img}}"
updated CODEPEN

Categories