I'm currently developping an app using ionic (1.3)/angular (1.5). This is my first time using angular, but I have been developping with ember.js for the past two or three years.
I'm a bit confused by how I can conditionally display stuff in templates : in ember, I would do
<div class="col-xs-12">
{{#if condition}}
some template..
{{else}}
something else
{{/if}}
</div>
But in angular, it seems to me that you'd have to do :
<div class="col-xs-12" ng-if="condition">
some template..
</div>
<div class="col-xs-12" ng-if="!condition>
something else
</div>
Which to me seems really cumbersome and does not really convey the intention. Is there any other (better) way to display stuff conditionally in templates ?
Thanks a lot for your time !
There is one more way to achieve this as show in the code below:-
<div ng-switch="myVar">
<div ng-switch-when="condition1">
some tempelate....
</div>
<div ng-switch-when="condition2">
some tempelate....
</div>
<div ng-switch-when="condition3">
some tempelate....
</div>
<div ng-switch-default>
some fallback template ...
</div>
</div>
try this, here is working fiddle
<div ng-controller="MyCtrl">
<div class="col-xs-12" ng-show="condition">
some template..
</div>
<div class="col-xs-12" ng-show="!condition">
something else
</div>
</div>
controller, try using changing $scope.condition=false
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.condition = true;
//$scope.condition = false;
}
Related
On my index page, when I add a Hangouts button like below it is drawn & works as expected.
<body ng-app="sampleApp" ng-controller="MainCtrl">
<div class="row">
<div class="col-md-12 m-body">
<div class="m-header-text">
Hello Friend
</div>
<g:hangout render="createhangout"></g:hangout>
<div>
<!-- Insert html view templates here -->
<ui-view></ui-view>
</div>
</div>
</div>
<!-- So on -->
</body>
But when I place it inside a template, which is displayed based on url route, then only the Hangouts button is not drawn & cannot be seen in UI.
<script type="text/ng-template" id="/home.html">
<div class="col-md-12 m-Grid m-rowBg m-border">
<div ng-repeat="peers in lop">
Hey {{peer.username}}
Call Peer <g:hangout render="createhangout"></g:hangout>
</div>
</div>
</script>
Could you please tell me why is it not being drawn
&
what should I do to get the button displayed? It would be of great help !
Using AngularJS.
I had the same issue, and found a solution using Angular directives.
The problem rendering button with Google tag markup is that the rendering executes when the platform.js script loads, which is before Angular loads the template.
So a solution is to call Google API render function after Angular loaded the template. I did it creating an Angular custom directive with a link function :
hangoutButton.directive('hangoutButton', function() {
return {
restrict: 'E',
template: '<div id="hangout-button"></div>',
link: function (scope, element, attrs) {
gapi.hangout.render('hangout-button', {'render': 'createhangout'});
}
};
});
Then you can display it in a template with the custom element :
<div class="col-md-12 m-Grid m-rowBg m-border">
<div ng-repeat="peers in lop">
Hey {{peer.username}}
Call Peer <hangout-button></hangout-button>
</div>
</div>
I solved this by using the angular controller to render with javascript instead of in html markup. Try something like this:
<body ng-app="sampleApp" ng-controller="MainCtrl">
<div class="row">
<div class="col-md-12 m-body">
<div class="m-header-text">
Hello Friend
</div>
<div id="placeholder-div"></div>
<div>
<!-- Insert html view templates here -->
<ui-view></ui-view>
</div>
</div>
</div>
<!-- So on -->
In your controller:
myApp.controller('MainCtrl', ['$scope', function($scope) {
gapi.hangout.render('placeholder-div', { 'render': 'createhangout' });
}]);
Try removing the / from id="/home.html"
Waves is from here.
http://fian.my.id/Waves/
To add the wave effect, you just have to add the JS and CSS files, then add class="waves-effect waves-button" to the component of your choice, and call Waves.displayEffect();.
Unfortunately, it looks like the angularJS ng-repeat breaks this. There are no errors in the console.
This works:
Click Here
<div class="col-md-4 col-sm-6 garment" ng-repeat="garment in buypage.garments">
</div>
This doesn't:
<div class="col-md-4 col-sm-6 garment" ng-repeat="garment in buypage.garments">
Click Here
</div>
Edit
Moving Waves.displayEffect(); inside controller did not fix it.
Solved
HTML:
<div ng-repeat="garment in buypage.garments" ng-init="initWaves()">
...
</div>
In AngularJS Controller:
$scope.initWaves = function(){
Waves.displayEffect();
}
All samples of ng-view directive shows that it must being used like follows
<div class="header">
</div>
<ng-view></ng-view>
I think a little while taking a shower and the doubt below comes to play with the need of lazily load all content with help of resolves in ng-view plus ng-switch and ng-include. Something new, without an AMD solution to templating like requirejs!text plugin and angularjs providers. The idea is change the subview thru the links inside of ngView. The view template will being something like that:
<div>
Item Profile
status
View1
</div>
<div ng-switch="view">
<div ng-switch-when="item-profile">
<div ng-include="'item-profile.html'">
</div>
<div ng-switch-when="status">
<div ng-include="'status.html'">
</div>
</div>
<div ng-switch="subView">
<div ng-switch-when="1">
<div ng-include="'sub-view1.html'">
</div>
<div ng-switch-when="2">
<div ng-include="'sub-view2.html'">
</div>
<div ng-switch-when="3">
<div ng-include="'sub-view3.html'">
</div>
</div>
And the index.html will looks like:
<body>
<ng-view></ngview>
</body>
And the route configuration:
angular.module('app', ['ngRoute']).config([
'$routeProvider',
function (rp){
rp.when('/:view/:subView', {
template: 'view.html',
controller: [
'$scope',
'$route',
function (s, r) {
s.subView = r.params.subView;
s.view = r.params.view;
}
]
});
}
]);
But for some reason this does not work, follow the code on plunkr
Sounds like you need ui-router, specifically its nested/sub-views and named views.
I have used the pager of AngularJS with Server Side coding. Basically what happens is when user clicks on NEXT the group of 5 records is displayed.
Now as the application is used in Tablets, i need swipe effect for this.
<section class="recent" style="margin: 20px 0;">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 text-center" data-ng-init="recentUsers(1)">
<button type="button" class="rc-buttons" data-ng-repeat="user in recentusers">
{{user.firstname}}
</button>
<pager style="margin-top: -28px;" total-items="recenttotalItems" page="recentcurrentPage" items-per-page="recentitemsperpage" max-size="maxsize" on-select-page="recentUsers(page)" class="pagination-sm"
previous-text="<<" next-text=">>"></pager>
</div>
</div>
</div>
</section>
How to implement swipe effect in AngularJS?
For handling swipes, you can use the ngTouch module's ngSwipeLeft and ngSwipeRight.
Since it is a separate module, you need to include the script separately:
<script src=".../angular-touch.min.js"></script>
You, also, need to include the module as a dependency to you main module:
angular.module('yourApp', ['ngTouch']);
Then you can use it to like this:
<div ng-swipe-right="doSomething()" ng-swipe-left="doSomethingElse()">
...
</div>
I have a controller:
function ItemsController($scope, $http){
$scope.init = function(){
$scope.siteItems = [
{id:'1', path:'img/1.png'},
{id:'2', path:'img/2.png'}
];
}
};
and I have a view items.html:
<div class="row" ng-controller="ItemsController" ng-init="init()">
<div class="col-xs-6 col-md-3" ng-repeat="item in siteItems">
<a href="#/item/{{item.id}}" class="thumbnail">
<img src="{{item.path}}">
</a>
</div>
</div>
when ever I load the view inside the ng-view the list gets initialised and ng-repeat produces two elements. However {{item.path}} and {{item.id}} are empty. I tried to do it with ng-src but the result was the same. I was curious if it will work with ng-bind just to see if it will bind the content and it works but its not what Im trying to do. When ever I move the content from the items.html to the main index.html view everything works. Does anybody have an idea what am I doing wrong?
EDITED:
Here is a working plunker. On my machine I wrote it like:
and I get a result of:
I landed this on this probably 2 years late, but I was using Jekyll and although it's strange that the source code look exactly the same, meaning it should work, it doesn't.
The reason being {{ }} is being reserved for Liquid template engine. To overcome this, I have found this code to re-define the syntax.
var myApp = angular.module('myApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
So now I can use [[ ]] instead of {{ }} and it works out.
Source: http://www.noxidsoft.com/development/using-jekyll-and-angularjs-together/
Have you tried doing it like this:
function ItemsController($scope, $http){
$scope.items = [
{id:'1', path:'img/1.png'},
{id:'2', path:'img/2.png'}
];
};
And the Html without the init?
<div class="row" ng-controller="ItemsController">
<div class="col-xs-6 col-md-3" ng-repeat="item in items">
<a href="#/item/{{item.id}}" class="thumbnail">
<img src="{{item.path}}">
</a>
</div>
</div>
I made a plunker out of mylescc's answer, and it's working fine:
<div class="row" ng-controller="ItemsController">
<div class="col-xs-6 col-md-3" ng-repeat="item in items">
<a href="#/item/{{item.id}}" class="thumbnail">
<img src="{{item.path}}">
</a>
</div>
</div>
There is no picture at there referenced path, of course, but the href link is shown correctly. And actually your code works fine, too. See plunker. So, it seems to me, you haven't initialized angularjs correctly.