I'm new to both of Ionic framework and angular js which I find really helpful.
I'm stuck with a tiny problem. I'm not able to make routing pages. I just wanna link two pages dynamically.
on the first page I have a list of friends using ng-repeat.
when I click on a list item I want to show another page which contains all the details of the friend selected.
I was confused reading both of Angular js and Ionic documentation. so can you pease help with a simple code.
here is my code :
CODEPEN
<div ng-controller="MyCtrl">
<ion-content>
<div class="list">
<div class="item item-divider">
Friends
</div>
<a class="item" href="#" ng-repeat="item in items">
<h3>{{item.name}}</h3>
</a>
</div>
</ion-cotent>
</div>
<script id="friend.html" type="text/ng-template">
<view left-buttons="leftButtons" right-buttons="rightButtons" hide-back-button="true" title="'Awesome'">
<content padding="true" has-header="true">
<h1>Friend details</h1>
</content>
</view>
</script>
I edited your CodePen, have a look. Yes you were missing $state, as well as anuglar.config. I hope you get clear on how to use states and how to pass data between them.
CodePen
Related
Being fairly new to Meteor, I'm stuck with an issue I encountered while generating input "on-the-fly" with a Helper. Indeed, what I'm trying to do is to generate a left labeled input with a dropdown but the problem is that I have to call the method $('.ui.dropdown').dropdown();
After creating each input with its corresponding dropdown, and I don't know how to do it properly with semantic-UI and Meteor environment.
Here is my helper creating the inputs:
'filterColumns': function() {
return Session.get('s_filterColumns');
}
Where 's_filterColumns' is an array looking like ["Firstname", "Lastname", "LivingPlace"]
And here is the HTML template using the helper to generate inputs:
<div id="fields">
<div class="ui grid">
{{#each filterColumns}}
<div class="eight wide column">
<label>{{this}}</label>
<div class="ui left labeled input">
<div class="ui dropdown label">
<div class="text">Start by</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Start by</div>
<div class="item">Contains</div>
<div class="item">End by</div>
</div>
</div>
<input type="text">
</div>
</div>
{{/each}}
</div>
</div>
But then, when populating the session variable with new content, the inputs are being created accordingly but the javascript dropdown method is not called again and so my left label is not a dropdown.
If you have any recommendations regarding anything in my conception I'd be glad to learn from someone more experienced than me.
If you are unsure when to call $('.ui.dropdown').dropdown(), try running it inside Template.myTemplate.onRendered() where myTemplate is the name of your template. Given that you have multiple dropdowns though you might want to put the html that's inside your {{#each }} into its own template and use that for onRendered().
Note: Community Wiki answer created because question was answered by Michel Floyd in the comments.
I have an ember app which consist of a div with fixed height and overflow-y: scroll.
Whenever I add an object a new div is added to the main div:
<div class="main-container">
<div class="added-item"></div>
<div class="added-item"></div>
...
</div>
As the list grows longer I would like to scroll to the last item after my Ember app has created a new record.
My template loop looks as follows:
<div class="task-comments">
{{#each comment in comments}}
<div class="comment">
<div class="comment-content">
<span class="author">
<img {{bind-attr src=comment.userObject.userProfile.avatar}} alt="Avatar">
</span>
<p class="comment-user">
<strong>{{comment.userObject.username}}</strong>
</p>
<p>{{comment.comment}}</p>
</div>
</div>
{{/each}}
</div>
.task-comments is the main div in this case.
How would I go about doing that?
The key part is to execute the JS that scrolls to the desired position after the comment is added to the list and rendered on the screen.
In your view, schedule your scroll code to run using Ember.run.scheduleOnce('afterRender', this, function() {..}). You can find a short working example here.
If you're not familiar with the Ember run-loop, take a look at the official docs
can you please tell me how to common view in all view ?I have a panel I need to show that panel in all view ?can you please tell me how it is possible?
Here is my panel
http://plnkr.co/edit/rt5dAwhVzvP14UDR2jc7?p=preview
Now I need to show in panel in both two views how it is possible ?
http://plnkr.co/edit/KnUGjEBOhiBAp0e6ThIl?p=preview
I am able to add common ..is it the best way to implement
<body>
<a class="large button toggle" pageslide="right" ps-speed="0.8" href="#demo-right">Open Demo</a>
<div style="padding:20px" id="demo-right">
<h2>Hello Pageslide</h2>
<p>Put here whatever you want</p>
<a id="demo-right-close"i class="button" >Close</a>
</div>
<ng-view></ng-view>
</body>
add toggle the panel using the same button ?
Ideally, create the panel as a directive and then include it in each view that you wish for it to appear in?
https://docs.angularjs.org/guide/directive
Pay particular attention to this section:
https://docs.angularjs.org/guide/directive#template-expanding-directive
Im practicing angularJS and jquery mobile. Im loading a local stored json file (used an array here) to my app and present some basic info in a list view. I want to present more detailed info in a dialog page\box once the user clicks on something in the JQM listview. Right now im able to present the basic info in the listview but pretty clueless regarding the next step. Please advise.
I was thinking that the one controller that i have can manage two pages, but this is obviously wrong.
JS code:
var myCuponApp = angular.module("cupon", []);
myCuponApp.controller("controller", function ($scope) {
$scope.itemSet = [{"id": 1, "cuponName": "Nikola Tesla", "age": "45"}];
});
html code:
<head ng-app="cupon">
<div data-role="page" id="scientists" ng-controller="controller">
<div data-role="header"><h3>great scientists</h3></div>
<div data-role="content">
<div>
<ul data-role="listview" data-inset="true" data-filter="true">
<li ng-repeat="item in itemSet" data-role="button">{{item.cuponName}}</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="sc" ng-controller="controller">
<div>{{item.cuponName}}</div>
</div>
</head>
Why the tabs are not shown with AngularJS tabbale directive.
http://plnkr.co/edit/yu0Bh0?p=preview
This is optional part of angularJS, which is used everywhere in the docs (here)
The source of the directive is here.
I don't see any special css in the doc site.
EDIT:
the markup of the plunkr (above) was copied from the doc link given above.
But, when tried with the markup on Angular main page (angularjs.org), it works.
Not sure how it works at doc site.
The working markup has data-toggle attributes, and url fragments to tab pane.
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="">index.html</li>
<li class="">project.js</li>
<li class="">list.html</li>
<li class="active">detail.html</li>
<li class="">mongolab.js</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="project-html">
<h1>project</h1>
</div>
<div class="tab-pane" id="project-js">
<h1>project js</h1>
</div>
<div class="tab-pane" id="list-html">
<h1>project html</h1>
</div>
<div class="tab-pane active" id="detail-html">
</div>
<div class="tab-pane" id="mongolab-js">
</div>
</div>
</div>
There has to be some functionality / code written somewhere that makes the tabs work. Currently, what you have there is just the html and css ( which provides the structure and the styling ) and the behaviour part is missing ( the JS part ).
In angular, this behaviour is custom written and is provided the directive. In bootstap, you need to include the js file ( bootstrap.js ? ). Then there are two ways of making this work. Either include the data-* elements as specified in the docs in their appropriate places or on document ready call something like
$(".tabbable").tabs();
in your JS code somewhere. This is the behavioural pieces that is missing from your plunker.