Im working on a project that uses AngularJS and Ionic.
The project will have inputs that forms a list and anyone may comment on each list item.
How do I include a date/time that a user adds an list item or comments on it?
I done some research and understand that AngularJS has a existing item, kind of like a inbuilt method ("[ ].created") for this. I saw many projects just use that without any controllers. I tried but it didnt work for me. I tried to then add a js code, didnt work as well. My code below.
Not too sure if its a Ionic compatibility issue if any? Would appreciate some help. Sticking to the AngularJS method will be preferred! Thank you!
The AngularJS documentation for dates
The resultant code is as follows with a filter:
html portion (included ng-controller="MainCtrl")
<div class="post row" ng-repeat="post in posts"></div>
<a href="{{ post.url }}">{{ post.title }}
<span class="url">({{ post.url | hostnameFromUrl }})</span>
</a>
<br> {{ post.created | date }}
<!-- this is the angularJS code added -->
I'm not quite sure what are you tiring to achieve with this "$scope.post" variable
It will throw undefined because you are creating static object "$scope.post" without "get()" function here:
$scope.post = {url: 'http://', title: ''};
If you are tying to revive some data form server try using angular $http component
Here also "$scope.post[0]" and "post.getDate" will become undefined
$scope.date = post.getDate( $scope.post[0].created);
Related
I am working on an issue in an application that mixes angularjs and thymeleaf. I want to build a template in thymeleaf that will allow me to use a variable to specify an angular attribute directive to use.
It seems like thymeleaf does not allow variables to be used as attributes. I have tried the following:
<div th:attr="${portlet.attrDirective}">
....
</div>
Didn't work
<div th:inline="text">
<div [[${portlet.attrDirective}]]>
...
</div>
</div>
Also didn't work
Am I doing something wrong?
There also is the possiblity of they portlet.attrDirective being null.
I got it working finally using the following code:
<div th:attr="${portlet.attrDirective == null} ? nodirective : ${portlet.attrDirective}=${portlet.attrDirective}">
...
</div>
Does anyone have a more readable solution?
I literally tried anything at this point, but I am still learning and can't get this to work.
https://plnkr.co/edit/FrNChlSwHYDbapr7gFQH?p=preview
<a class="collection-item"
ng-repeat="task in tasks"
ui-sref="todo.detail({ todoID: task.todoID })">
{{ task.text }}
</a>
What I am trying to do, is routing to /todo/1, /todo/2 and so on from the "todo"-view, but I seem to have a problem with the $stateParams.
It'd be nice if you guys could help me out and show me where my problem is :).
In addition to adding an id field to your task objects you will need to put a <section ui-view></section> in your todo.html file. This is how nested states work. You can use an href as Oliver mentioned or stick to the sref. I've forked your plunk here as an example.
Assuming each task in your array of tasks has an ID you want to then navigate to you're going to need something along the lines of:
<a class="collection-item"
ng-repeat="task in tasks"
ng-href="#todo/{{ task.todoID }}">
{{ task.text }}
</a>
You'll then need the /todo/:toDoId or something similar set up in your routes.
You have not defined todoID in your tasks items.
This works: https://plnkr.co/edit/Wk33w2eRfpz7UZNNZzFs?p=preview
I'm including translation to my website using angular-translate
So I have this piece of code:
<td class="nav-button">
<a href="{{button.location}}" class ="'{{button.clazz}}'" ng-click="showDetails = !showDetails" >
{{button.text}}
<div ng-show="button.subButtons.length && showDetails" ng-repeat="subButton in button.subButtons">
<a href="{{subButton.location}}" class="'{{button.clazz}}'" translate>
{{subButton.text}}
</a>
</div>
</a>
</td>
The sub-buttons appear normally and the translation works just right. But only translating the subButtons.
The problem is : I want to translate the {{button.text}} as well
But when I add the translate to the first <a>, neither the features works.
I've tried several ways to fix this but I failed.
Somebody that maybe had the same problem could help ? Thanks.
angular translate is a filter
{{button.text|translate}}
I am curious to what subButton.text contains. It needs to contain the key of the translation value that you are looking for. For example, my translations file looks like this:
{
"SUB_BUTTON": "Hello there, this is the sub button"
}
I can create a button in multiple ways.
via filter
<button>{{"SUB_BUTTON" | translate}}</button>
via directive 1
<button translate="SUB_BUTTON"></button>
via directive 2
<button translate>"SUB_BUTTON"</button>
For more info please read further on the angular-translate Docs
I'm pretty new to Angular, and I've run into an issue. I'm hoping that there is an easy way to solve this problem.
Basically, I have a list of Appointments that I retrieve from the server.
$scope.appointments = [{starts_at: "2015-1-1", name: "First"}, {starts_at: "2015-1-1", name: "Last"}, {starts_at: "2015-1-2", name: "Next Day"}];
Now I'd like to show these appointments in a list. I decided that I could use ng-repeat + filters for this, but now I'm stuck.
<ion-slide-box on-slide-changed="slideHasChanged($index)">
<ion-slide>
<div class='box'>
<div class="list list-inset" ng-repeat="appt in appointments | filter:????>
<div class="item" ng-click="openAppointmentModal(appt)">
<span>Appt {{appt.name}}</span>
<span>Starts at {{appt.starts_at}}</span>
</div>
</div>
</div>
</ion-slide>
</ion-slide-box>
I wasn't sure if I could use the built-in filterFilter to do this, so I ended up writing my own filter filterDateFilter, which takes in an array, a property name, and what date you want to filter for. I can then write something like ng-repeat='appt in appointments | filterDate:starts_at:curDate' where curDate is defined by $scope.curDate = new Date() in the controller.
Phew. That works, but only for filtering for whatever $scope.curDate is defined as.
Now, I want to the user to be able to swipe to the previous/next days, and show only the appointments for that day. I assume I'd have to move the <ion-slide> to a template, but I'm not sure where to go from there. What are my next steps?
Sorry for the long post and detailed explanation, but I didn't want to just throw up a question and show no previous effort.
I think that instead of ion-slide, you can use the ionic on-slide-left and on-slide-right directives to call a function you define in your controller which increments or decrements $scope.curDate by 1. This seems a simpler alternative to me than simulating infinite slides.
http://ionicframework.com/docs/api/directive/onSwipeLeft/
I've come a bit stuck in my angularjs project.
I run a for loop to query some nested JSON data and output it in 3 different variables inside an ng-repeat. So it makes up a title where i have the control over the elements that make up the title {{ number }} {{ shots }} {{ goals }}.
However, my knowledge of angularjs is stretched here because when I click on one of the events (from the ng-repeat list) it gives me a new tab, but I want to bring the title of that event to the new tab.
I can't call it as a scope variable as the last variable is still being held in there. I thought about assigning it as a new variable.. but was unsure how to actually do that in angularjs.
Here is the code i'm working with:
<li ng-repeat="event in events.events">
<div ng-if="actionType(event)" >
{{number}}
{{shots}}
{{goals}}
</div>
<a class="showPlayer" ng-click="showPlayer(event)">
View more stats
</a>
</li>
my angularjs is just a standard for loop which looks for values inside the js and assigns them as variables.
Any advice is very much appreciated.
EDIT: 24 hours later and I still can't crack this (very frustrating).
I'm not sure if there is a way to grab the string from the ng-click and clone that?
I don't want to have to run another check for the title when I already have the information, surely there is an 'angular' way to do this??
Please try this I am not sure but it might help you
<li ng-repeat="event in events.events">
<div ng-if="actionType(event)" >
{{event.number}}
{{event.shots}}
{{event.goals}}
</div>
<a class="showPlayer" ng-click="showPlayer(event.number,event.shots,event.goals)">
View more stats
</a>
</li>
Try using $rootScope.
Define a rootscope variable where event is handled and write your title in html like you did. {{title}}
$rootScope.title = "example";