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"
}
Related
i have a problem with my code , this code is about append a modal to element with specific id. so that when button clicked ,this modal popup will showed inside div element with id="forModal" (div element with this id is inside view.html) ,my app using angularjs that have base html(index.html) ,one template for route(view.html),one template for modal(modal.html).
index.html
<html>
<head>
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!--Ui Route-->
<script src="lib/ionic/js/angular-ui/angular-ui-router.min.js"> </script>
<!--UI Bootstrap-->
<script src="lib/ionic/js/angular-ui/ui-bootstrap-2.5.0.min.js"></script>
<!--UI Bootstrap TPLS-->
<script src="lib/ionic/js/angular-ui/ui-bootstrap-2.5.0-tpls.min.js"></script>
<!--ngCoockies-->
<script src="js/angular-cookies.js"></script>
<!-- my app's js -->
<script src="js/app.js"></script>
<!--controller js-->
<script src="js/controller.js"></script>
</head>
<body ng-app="starter">
<ui-view></ui-view>
</body>
</html>
app.js
var moduleapp = angular.module('starter', ['ionic','ui.router','ngCookies','ui.bootstrap']);
moduleapp.config(function($stateProvider,$urlRouterProvider){
$stateProvider.state("dashboard",{
url:"/dashboard",
templateUrl:"templates/dashboard.html",
controller : "dashboardCtrl"
})
$stateProvider.state("dashboard.view",{
url : "/view",
templateUrl : "templates/view.html",
controller: "viewDataCtrl"
})
$urlRouterProvider.otherwise("/dashboard.view")
})
controller.js
moduleapp.controller('dashboardCtrl',[function(){
//some code
}])
moduleapp.controller('viewDataCtrl',['$document','$uibModal','$scope','$http','$cookies',function($document,$uibModal,$scope,$http,$cookies){
// reserve variable,declare it as object
$scope.dataColumn = {};
$scope.dataData = {};
// reserve variable for user authetication level
$scope.userLevel= $cookies.get('userLevel');
//function for finding available column
function caricolumn(){
$http.get('link for search column.php').success(function(hasil){
$scope.dataColumn = hasil;
});
}
//executing function when controller running
caricolumn();
//function for get data,return result to $scope.dataData as object
function caridata(){
$http.get('link for search data.php').success(function(hasil){
$scope.dataData = hasil;
})
}
//execute function when controller running
caridata();
//function for edit
$scope.edit = function(x){
var modalInstance = $uibModal.open({
templateUrl:'templates/modal.html',
controller:'viewDataCtrl',
//THIS IS THE PROBLEM ,appendTO doesnt work,still inject modal popup to body element
appendTo : angular.element(document.querySelector('#viewElement'))
});
}
//function for delete data
$scope.delete = function(x){
$http.post('link for deletedata.php',x).success(function(hasil){
alert(hasil);
//if output(php echo) same as string ,this condition considered as success
if(hasil == "Delete Success"){
caridata();
}
})
}
}]);
modal.html
<div class="modal-header">
<h3>Hayy</h3>
</div>
<div class="modal-body">
<p>this is Body</p>
</div>
<div class="modal-footer">
this is footer
</div>
dashboard.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>
<ui-view>
<!--This is where view.html injected-->
</ui-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content>
<ion-list ><a ui-sref="dashboard.add">
<ion-item>Tambah Data</ion-item></a>
</ion-list>
<ion-list ><a ui-sref="dashboard.view">
<ion-item>Tampil Data</ion-item></a>
</ion-list>
<ion-list >
<a ng-click="logout()">
<ion-item>Log Out</ion-item>
</a>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
view.html
<div id="viewElement" class="container" style="margin-top:50px;">
<h2>Data-Data</h2>
<hr/>
<table class="table table-bordered">
<thead>
<tr>
<th ng-repeat="dc in dataColumn">{{dc.KOLOM}}</th>
<th ng-if="userLevel == 'LV02' || userLevel == 'LV01'">Edit</th>
<th ng-if="userLevel == 'LV01'">Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="dd in dataData" id="dt{{dd.IDROW}}">
<td ng-repeat="ddd in dd.DATA">{{ddd}}</td>
<td ng-if="userLevel == 'LV01' || userLevel == 'LV01'"><button type="button" ng-click="edit({{dd.IDROW}})" class="btn btn-warning">Edit</button></td>
<td ng-if="userLevel == 'LV01'"><button type="button" ng-click="delete({{dd.IDROW}})" class="btn btn-danger">Delete</button></td>
</tr>
</tbody>
</table>
</div>
as you can see ,when app running .route default will go to "dashboard.view"
dashboard state is code for left sidemenu ,then dashboard.view state for viewing data(view state in child from dashboard state)
what i want is when edit button clicked inside view.html(controller : viewDataCtrl,state : dashboard.view), modal popup will appear inside div element with id="forModal" (div element with this id is inside view.html)
but with this code ,modal popup always appear inside body tag element not inside div element with id="forModal".
how can i approach this condition ? thanks
I have a list page (List.Html) where n number of rows can be selected, in order to visually display the row data in a chart (using C3).
This is done by clicking on a button (compareList()) that navigates to a new page (Chart.Html). The problem is that the chart is not displaying on the new page, possibly because the chart data is being loaded before the page is loading meaning the HTML where the chart needs to be inserted is not found.
If the Chart Page is loaded before the list page, the chart is generated but
only once upon click but then is lost.
Controller.js
$scope.compareList = function(){
var total = $scope.array.length;
var tempArray= [];
for(var i=0; i<total; i++){
if($scope.array[i].selected){
tempArray[i] = $scope.array[i];
}
}
if(comparr.length>0){
$scope.compGraph(tempArray);
}
}
$scope.compGraph = function(array){
var tempData = [];
for(var i=0; i<array.length;i++){
tempData.push([array[i].name,array[i].evi]);
}
var chart = c3.generate({
bindto: '#chart',
data: {
columns: tempData,
type:'bar'
}
});
$state.go('eventmenu.compare');
}
List.Html
<ion-view view-title="List">
<ion-nav-buttons side="right">
<button class="button button-icon icon ion-stats-bars" ng-click="compareList()"></button>
</ion-nav-buttons>
<ion-content>
<ion-item ng-repeat="item in items" class="item-remove-animate">
<div class="row" >
<div class="col col-40"{{ item.name }}</div>
<div class="col col-30" style=";">{{ item.area}}m<sup>2</sup></div>
<div class="col col-20" style=";">{{ item.value}}</div>
<div class="col col-10 col-top" ><ion-checkbox style="border:none;margin-top: -20px;" ng-model="item.selected"></ion-checkbox></div>
</div>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Chart.HTML
<ion-view view-title="Land Comparison">
<ion-content ng-controller="Controller">
<div class="padding">
<div id="chart" ></div>
</div>
</ion-content>
</ion-view>
I am using ng-if for charts. Set a value for listen to loading situation and use it.
In HTML:
<div class="padding">
<div ng-if="isDataLoaded" id="chart"></div>
</div>
In controller:
$scope.isDataLoaded = false;
function loadData(){
$scope.myData = [1,2,3];
$scope.isDataLoaded = true;
}
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");
}
})
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.
I'm creating a mobile application using the framework ionic which is built on AngularJS.
I'm trying to load an image into my application from a JSON file but I cannot get it to load correctly.
Could anybody help me out?
Here's my HTML:
<ion-view view-title="Gallery" align-title="center" ng-controller="photoCtrl" ng-init="getImages()">
<ion-content>
<div class="col col-25" ng-repeat="image in images">
<img ng-src="{{images}}" width="100%" />
</div>
</ion-content>
</ion-view>
Here's my javascript:
.controller("photoCtrl", function($scope, $http) {
$scope.data = [];
$scope.getImages = function() {
$http.get('https://api.myjson.com/bins/30vuu')
.success(function(data) {
$scope.data = data;
})
.error(function() {
alert("Not working");
});
};
});
There are several issues here. First, your API call returns an object with a single property called images (not an array). Second, you're not accessing it in your HTML because that would be {{ data.images }} since your $scope member is called data.
So, the first thing you need to do is have the API return an array. If you do that, then use this HTML:
<ion-view view-title="Gallery" align-title="center" ng-controller="photoCtrl" ng-init="getImages()">
<ion-content>
<div class="col col-25" ng-repeat="image in data.images">
<img ng-src="{{image}}" width="100%" />
</div>
</ion-content>
</ion-view>
And this JavaScript:
.controller("photoCtrl", function($scope, $http) {
$scope.getImages = function() {
$http.get('https://api.myjson.com/bins/30vuu')
.success(function(data) {
$scope.data = data;
})
.error(function() {
alert("Not working");
});
};
});
If you only want your API to return one image then it's as simple as this for the HTML:
<ion-view view-title="Gallery" align-title="center" ng-controller="photoCtrl" ng-init="getImages()">
<ion-content>
<div class="col col-25">
<img ng-src="{{ data.images }}" width="100%" />
<!-- data.images because that's the name returned by the API call -->
</div>
</ion-content>
</ion-view>
The JavaScript doesn't need to change from what I have above;
Please change
<img ng-src="{{image}}" width="100%" />
instead of
ng-src="{{images}}"