I am having problems showing my data from controller to view in ionic angularjs
this is my code
alkitab.html
<ion-view view-title="Alkitab ">
<ion-content class='has-header' style="padding:2%;" ng-init="loadbiblelist();">
<ion-list>
<div ng-repeat= "data in alkitabdate" style="margin:0 auto; text-align:center; ">
<h4>{{data.tanggal}}</h4>
<br>
<h4>{{data.alkitabs.judulPasal}}</h4>
<br>
<div class="isialkitab" style="line-height:2em; font-size:18px; font-family:Roboto; text-align: justify; -moz-text-align-last: center; text-align-last: left;">
{{data.alkitabs.isi}}
</div>
</div>
</ion-list>
<button class="button-balanced button-block large-button ion-thumbsup" ng-click="submit()"><h4>Saya Sudah Baca Alkitab</h4></button>
</ion-content>
</ion-view>
Controller.js
.controller('AlkitabCtrl', ['$scope', '$rootScope', '$timeout', '$state', '$stateParams', 'Alkitabdetail', function($scope, $rootScope, $timeout, $state, $stateParams, Alkitabdetail) {
var rootRef = new Firebase('https://ayobacaalkitab.firebaseio.com/');
var childAlkitab = rootRef.child('alkitab');
var alkitabId = $stateParams.alkitabId;
console.log(alkitabId);
var bibleidurl = childAlkitab.child(alkitabId);
$scope.loadbiblelist = function() {
bibleidurl.on('value', function(snapshot){
$timeout(function(){
var snapshotVal = snapshot.val();
$scope.alkitabdate=snapshotVal;
console.log($scope.alkitabdate);
});
});
}
}])
the problem is in console.log($scope.alkitabdate) i can see the result from firebase but it not showing when i try it using ionic serve.
any help appreciated.
Thanks.
The problem here is returning result is an object not an array, so you cannot use ng-repeat over an object, what you can do is,
<div style="margin:0 auto; text-align:center; ">
<h4>{{alkitabdate.tanggal}}</h4>
<br>
<h4>{{alkitabdate.alkitabs.judulPasal}}</h4>
<br>
<div class="isialkitab" style="line-height:2em; font-size:18px; font-family:Roboto; text-align: justify; -moz-text-align-last: center; text-align-last: left;">
{{alkitabdate.alkitabs.isi}}
</div>
if your result contains more than one object(i.e array) the code which you have should work.
Related
I have used ng-repeat to display a set of values as hyperlink which further opens related data in very next DIV. Now when I click on the link, after loading data in respective div, how can I disable the clicked link?
angular.module('app', []).controller('ctrl', function($scope){
$scope.items = [
{name:'First', descr:'First Description'},
{name:'Second', descr:'Second Description'},
{name:'Third', descr:'Third Description'}
]
var visited = [];
$scope.act = function(item){
if(visited.indexOf(item.name) == -1){
item.dis = true;
$scope.active = item;
visited.push(item.name);
}
}
})
.dis {
color: currentColor;
cursor: not-allowed;
opacity: 0.5;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<div ng-app='app' ng-controller='ctrl'>
<a ng-class='{dis:x.dis}' ng-repeat-start='x in items' href='#' ng-click='act(x)'>
{{x.name}}
</a>
<br ng-repeat-end>
<div>
{{active.descr}}
</div>
</div>
This is a strange issue, the controller loops through an array which collects the url from the server for the images, then its put into src="https://www.socialnetwk.com/test.png"
However it doesnt load those images. I inspect element, right click src=".." and open in new window. once in a new window and I refresh the ionic app page it load that image, that one image only that I
.controller('feedCtrl', function($scope, $http) {
$scope.result = "";
$http.get('https://m.socialnetwk.com/home/app/feed_load.php').then(function(rest) {
$scope.records = rest.data;
});
})
<div ng-repeat="feed in records">
<ion-list id="search-list5">
<ion-item class="item-avatar" id="search-list-item12">
<img src="https://www.socialnetwk.com/media/{{feed.profile_image}}">
<h2>{{feed.firstname}} {{feed.lastname}}</h2>
<p>{{feed.location}}</p>
</ion-item>
</ion-list>
<div style="margin: 0px; line-height: 250px; background-color: rgb(232, 235, 239); text-align: center;">
<img style="width:100%;height:auto;" ng-src="https://www.socialnetwk.com/media/{{feed.media_file_format}}/{{feed.media_post_id}}{{feed.media_author_id}}.{{feed.media_file_format}}" />
</div>
<div class="item item-body" id="search-list-item-container3">
<div id="search-markdown6" class="show-list-numbers-and-dots">
<p style="margin-top:0px;color:#000000;">{{feed.mediatxt}}
</p>
</div>
</div>
</div>
Be sure that you include your path with ng-src. If you just use src you will have troubles.
<img ng-src="data.imageurl"/>
I have tested your URL(https://m.socialnetwk.com/home/app/feed_load.php) resquest in Postman and get this.
[
{
"firstname": "Casper",
"lastname": "Round",
}
]
So you don't have data you need.
Check Url.
I'm having some issues with an app I'm creating in Cordova (5.3.3) using ionic (1.6.5) and angular js and building for iOS and Android.
I have a menu item that when I click should load the next state with other menu items. However it seems like it loads the next state once without the animation, then loads the state again with the animation resulting in a "jerky" effect. It's best shown in a video I have uploaded here: https://www.youtube.com/watch?v=YCEQeqFyNl4&feature=youtu.be
I was wondering if anybody has an idea of what could be the issue here and where I should start looking, or if there are known bugs about this?
Any help would be appreciated!
// the controller
.controller('ProgramCtrl', ['$scope', 'FacProgram',
function($scope, FacProgram) {
$scope.refresh = function() {
FacProgram.refresh()
.finally(function() {
$scope.$broadcast('scroll.refreshComplete');
});
};
$scope.temp_articles = function() {
return FacProgram.all();
};
}
])
.controller('ProgramDetailCtrl', ['$scope', '$stateParams', 'FacProgram',
function($scope, $stateParams, FacProgram) {
$scope.art = FacProgram.get($stateParams.programId);
}
])
// The factory in a different js file:
.factory('FacProgram', ['$http', '$q', 'FacJson',
function($http, $q, FacJson) {
var temp_articles = [];
function findHeader(src, headTag, index) {
var head = $(src).find(headTag).get(0);
temp_articles[index].headlinethumb = head.textContent;
temp_articles[index].headline = head.textContent;
}
function refresh() {
var q = $q.defer();
... // A fucntion that get's URL's from .json file
////////////////////////////////////////////////////////////
angular.forEach(urls, function(URL, index) {
//add the articles to the dictionary
temp_articles.push({
inx: index,
img: img_logos[index]
});
$http.get(URL)
.then(function(sc) {
// The will parse the html looking for thumbnail text, main body text etc
var src = sc.data.substring(sc.data.indexOf('<html>'));
... // code that parses website for content etc
////////////////////////////////////////////////////////
q.resolve();
},
function() {
q.reject();
});
});
});
return q.promise
}
return {
all: function() {
return temp_articles;
},
get: function(programId) {
return temp_articles[programId];
},
refresh: function() {
console.log('DPG programs refresh triggered');
temp_articles = []; // a catch to prevent duplicates and to allow other templates to use without
//contamination
return refresh()
}
}
}]);
<!-- the start state for progams of the DPG -->
<ion-view>
<ion-content>
<div class="list">
<a class="item item-thumbnail-left item-icon-right item-text-wrap" ng-repeat="art in temp_articles()" href="#/program/{{$index}}">
<img ng-src="{{art.img}}">
<h2 class="padding-top" style="font-weight: 300;">{{art.headlinethumb}}</h2>
<i class="icon ion-chevron-right" style="font-size: 18px"></i>
</a>
</div>
</ion-content>
</ion-view>
<!-- the datailed view of the application -->
<ion-view>
<ion-content>
<div style="text-align: left; padding-top: 30px; padding-left: 20px; padding-right: 20px">
<h2 style="font-weight: 500; font-size: 17px">{{art.headline}}</h2>
</div>
<!--<p style="padding-left: 10px; font-size: 13px; font-weight: 300">Datum</p>-->
<div style="text-align: center">
<img style="max-height: 300px; max-width: 300px; width: auto;" ng-src="{{art.img}}">
</div>
<div class="padding" style="font-weight: 300">
<div ng-bind-html="art.text | hrefToJS"></div>
</div>
</ion-content>
</ion-view>
the same happened to me if you put your controller in app.js try removing it from there and only applying it in controller or viceversa.
your state in app.js should look like this:
.state('state-name', {
url: '/state-name',
templateUrl: "templates/walkthrough/state-name.html"
//Notice no controller here
})
I have a nested state .
The view associated to it my app header.
it looks like this:
<ion-view cache-view="false">
<div class="navbar-fixed-top navbar-header bar bar-header " ng-if="showHeader">
<div class="container row">
{{ showSubHeader}}
<div ng-if="showSubHeader" class="topPull" draggable >
<button ng-if="showSubHeader" class="button-icon"><img src="img/topImg.jpg"></button>
</div>
</div>
</div>
</ion-view>
Now, I want div to be shown when showSubHeader is true.
The expression {{ showSubHeader }} changes from true to false correctly, but div does not hide/show according to value variable.
Is there a way to fix it?
Initially on page load, div shows/hides accordingly but div does not hide when variable value changes after loading.
controller:
.controller('AppCtrl', function($scope, $rootScope, $ionicModal, $timeout, $ionicSlideBoxDelegate, $state) {
$scope.showHeader=true;
$scope.showSubHeader=true;
$scope.checkBill= function(){
$scope.showSubHeader=false;
$state.go('menu.TotalBill')
}
})
Change $scope.showSubHeader=false; to $scope.showSubHeader =!$scope.showSubHeader;, then you will be fine.
Check out my example:
var app = angular.module('app', []);
app.controller('myctrl', ['$scope', function($scope) {
$scope.test = true;
$scope.hidden_test = true;
$scope.click = function() {
$scope.hidden_test = !$scope.hidden_test;
};
}]);
.outer {
background: #e2e2e2;
border: 1px solid #000000;
.inner {
background: #c2c2c2;
border: 1px solid #00aa00;
padding: 1px 0 0 25px;
}
}
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div ng-app="app">
<div ng-controller="myctrl">
<div class="outer" ng-if="test">
<p>Test</p>
<div class="inner" ng-if="hidden_test">
<p>Hidden Test</p>
</div>
<button ng-click="click()">Click</button>
</div>
</div>
</div>
I am playing with angular modal ui dialog. I wonder what is the way to center it ? I find a similar question:
Twitter Bootstrap - Center Modal Dialog
but was unable to make it work as I am rather new to angular. Here is a simplified version of the plunker for modal dialog from the angular ui components page:
http://plnkr.co/edit/M35rpChHYThHLk17g9zU?p=preview
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<div class="modal-body">
test
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<button class="btn btn-default" ng-click="open()">Open me!</button>
js:
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal) {
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl
});
};
};
var ModalInstanceCtrl = function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close("ok");
};
$scope.cancel = function () {
$modalInstance.dismiss("cancel");
};
};
My idea is to take the dimensions of the page dynamically when the modal is open and resize and center it, but I am not sure how can I do that as I am rather new to angularjs. Any help with working example will be greatly appreciated.
You can specify the style class for the modal window by using windowClass attribute while creating modalInstance
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
windowClass: 'center-modal'
});
then in your css you can specify the definition for .center-modal like,
.center-modal {
position: fixed;
top: 10%;
left: 18.5%;
z-index: 1050;
width: 80%;
height: 80%;
margin-left: -10%;
}
or specify anything based on your needs
This approach works with any modal size.
.modal {
text-align: center;
}
#media screen and (min-width: 768px) {
.modal:before {
display: inline-block;
vertical-align: middle;
content: " ";
height: 100%;
}
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
The original answer has an example with Plunker.