Im making a poll app where people can create a new poll (question and responses) then that gets pushed to my firebase database and the questions get populated as a list in the left side bar. I got that far and it works great.
Now i'm trying to make the take a poll feature so when a person clicks on the question they want to respond to, it updates the view for just that one question and ng-repeat for the number of responses there are.
Is there a firebase event handling similar to jquerys on click for .this to do this? How can I accomplish this, I feel stuck.
So I figured it out. For the nav bar on the left in my anchor tag within a ng repeat. I used a ng-click = "select(poll)" where poll being the ng-repeat = poll in polls
then in my controller I have this simple function
$scope.select = function(poll){
$scope.selected = poll;
};
which then in my takeApollview (i'm using ui-router) I just use the selected to display all the key values.
Msg me if anyone has a similar problem and needs guidance.
Related
I have a situation where I need to disable the button(added as widget for widget column) when I receive one web socket event. When receiving the web socket I might be in any page. So how to get the reference of that button widget and disable it.
I have created a fiddle WidgetTestFiddle
Can anyone please help.
Thanks in advance
You could use the Ext.ComponentQuery.
Using the query method you can search for the buttons inside your grid.
You probably want to give your buttons an itemId (e.g. itemId: 'widgetcolumn-button-switch') to ensure that you only find the buttons you want.
Using the itemId your search query would look like this: 'button[itemId="widgetcolumn-button-switch"]'
I forked your fiddle and created my own version to illustrate my point: Sencha fiddle example
I think there are several ways to achieve your wanted result.
KaMuns answer will work, but can be tricky in case you use a buffered store / grid. Because the pages in this case are handled internally by the store. Using a static itemId wont work in this case out of the box.
I would suggest you rely on the record data.
Everytime you recieve a websocket message, update the store and refresh the grid view can be an option.
I have modified your fiddle here:
https://fiddle.sencha.com/#view/editor&fiddle/3a87
Here are is the most relevant part:
var grid = btn.up('grid');
var models = grid.getStore().getData().getRange(); // of cause you can use find or another way here
var model = models.filter(mod => mod.get('actualRole') === 'Follower');
model[0].set('showBtn', false);
grid.getView().refresh(); // get ref to view and refresh because data changed
On top you can have a look on the defaultBindProperties and may change this to the hidden key of the button.
tl;dr
What would be best approach for structuring an angular app which supports filtering and sorting on the server side using radio button filters on client side
Context of the app:
I have a sample movie list app, where movies have genre and style to categorize them. They can be sorted based on name, rating, year of release. The backend is very clear, I pass the filters to url in the form of query parameters and data is returned and pagination is also addressed. From the client side I create the url and attach the string params to it. However I have tried few implementations of filters and sorting on the client side and wasnt satisfied. every implementation involves using radio buttons for filters. The following approaches were used by me.
Approaches used:
Create few filters based on genres and styles of movies, launch an event when one radio button is clicked, pass the filter-radio model in the event. Listen for the event in a movieListDirective and then create the url followed by triggering the server call.
Create filters and pass the data in a service, launch an event whenever a radio button is clicked. Listen for the event and receive the data from the service. Create the url and initiate the server call.
Not yet used this approach but thinking of giving it a try
On click of radio button push the data in the browser url in form of query parameters. Listen for url change event inside the directive and trigger the server call
I'm also thinking of using UI router. Create an abstract state for filter and sort button. Put the movieListDirective inside the child state.
I'm just not satisfied with my 2 approaches and think that there's a huge room for improvement. Can anyone please suggest a very scalable approach or something to improve the existing approach which I'm using. Thanks in advance.
**I'm using IONIC. I would like to take advantage of the pull to refresh and infinite scroll features. These have to be put inside the ionic-content directive. Hence the approach used should satisfy this requirement **
Well, if I were you I would change a variable in my $scope and listen its changes to request again with your filters.
I made a Plunker to help you.
https://embed.plnkr.co/cNZ1Um7FycaPBjef5LI1/
In this Plunker, I added the ng-model to my radio buttons. When these radio buttons are selected, they change my variable with their values.
<input type="radio" value="new" ng-model="area">
This radio button above change $scope.area value to "new". Then, my controller listen to this change event and call my $scope.requestAPI function.
$scope.$watch('area', function() {
$scope.requestAPI($scope.area, $scope.category);
});
This function use the values of $scope.area and $scope.category to make a request. Changing their values, you change the request.
It is exactly the feature that you need.
I am working on a News Feed that is similar to Facebook News Feed. I am implementing it in the following sequence:
When app is started, get everything, but only push two item to show.
The user can scroll down to see more and I will add more to the list.
If there are any new items, the user needs to pull to refresh to add the new ones.
The only problem I have right now is that each time an item is added, $firebaseArray automatically adds the new item to my array that I do not want snyc changes (I want to query once, get a set list). I was wondering if anyone would know how to prevent the auto update?
Look into .once this will allow you to get the data just once: https://firebase.google.com/docs/reference/js/firebase.database.Query#once
Instead of binding directly your $firebaseArray to the view, clone it to a scope (or controller) property that will be bound to the view. Factorize this process in a function you can call when the user pull-reloads so the the $firebaseArray is re-created.
A more appropriate approach would be to use Firebase's http api, with the angular $http service.
Edit: to clone the array to a scope var, try the following:
var allEvents = $firebaseArray(queryOfeverything);
allEvents.$loaded()
.then(function(events){
$scope.allEvents = angular.map(events, function(event) {
return event; // you may want to replace this line - I am not very familiar with firebase.
})
});
My code fetches a Collection from the server and iterates through it. For each model fetched it creates a View that is appended to the same parent element. Each of these views has a "click" event that triggers a function.
The problem is that clicking on any item in the list causes the event function to trigger for ALL elements in the list. The only workaround I have is to make the function itself dynamic and try to determine if it should run based on things like the ID of the item clicked:
'click .request_box': function(e) {
var myid = $(e.currentTarget).attr("id");
// code here which determines whether the function runs
}
}
This is a workaround, but it is also a hack, and I'm sure there has to be a better way of dealing with what must be a common problem (creating a list). Repeat searching around the web does not suggest any better way, so I am posting in the hope someone with more experience using Backbone can offer suggestions on a better way to approach this problem....
Thank you in advance.
I have created a sidemenu based app, in that after login I am displaying a number of tasks. If I click on the task it will redirect to the task details page, in that page I can update the tasks.
So after updating a task I need to go back to the previous task list page. I am using $ionicHistory.goBack(); to go back.
My problem is after come back, I need to refresh the task list i.e. updated task should not be there in the task list. How can I refresh/reload the task list?
If you bind your task to a tasks array, which will be used in the task list page, it should be automatically updated.
But the question is about not displaying, newly added tasks (still my previous suggestion should work) if not, performance reasons ionic views are cached, So when you come back to the previous view it doesn't go through the normal loading cycle. But you 2 options
1 - disable the caching by using <ion-view cache-view="false" view-title="My Title!"> in your ion-view, but this is not a very elegant solution. read more
2 - use ionRefresher (my preferred). read more here
https://github.com/angular-ui/ui-router/issues/582
according to #hpawe01 "If you are using the current ionicframework (ionic: v1.0.0-beta.14, angularjs: v1.3.6, angular-ui-router: v0.2.13), the problem with the not-reloading-controller could be caused by the new caching-system of ionic:
Note that because we are caching these views, we aren’t destroying scopes. Instead, scopes are being disconnected from the watch cycle. Because scopes are not being destroyed and recreated,controllers are not loading again on a subsequent viewing.
There are several ways to disable caching. To disable it only for a single state, just add cache: false to the state definition.
This fixed the problem for me (after hours of reading, trying, frustration).
For all others not using ionicframework and still facing this problem: good luck!"
Hope this helps.
You can also listen to ionic events such as $ionicView.enter on $scope and trigger the code that refreshes the list if you haven't bound your list as #sameera207 suggested.
EG:
// List.controller.js
angular.module('app')
.controller('ListController', ['$scope', function($scope) {
// See http://ionicframework.com/docs/api/directive/ionView/ for full events list
$scope.$on('$ionicView.enter', function() {
_someCodeThatFetchesTasks()
.then(function(tasks) {
$scope.tasks = tasks;
});
});
});
Bear in mind that it's not the most proper way (if proper at all) and if you do this you certainly have a design flaw. Instead you should share the same data array via a factory or a service for example.
For your task you can also use ion-nav-view.
It is well documented. And if you are using now Ionic 2 beta you can use some of the view lifecyle hooks like onPageWillLeave() or onPageWillEnter(). I just faced the same problem and defined a refresh() function, but the user had to click on a button to actually update the view. But then I found:
https://webcake.co/page-lifecycle-hooks-in-ionic-2/
You just have to import the Page and NavController module and also define it in the constructor. The you can use for example onPageWillEnter(), which will always invoke when you go again to a view:
onPageWillEnter() {
// Do whatever you want here the following code is just to show you an example. I needed it to refresh the sqlite database
this.storage.query("SELECT * FROM archivedInserates").then((data) = > {
this.archivedInserates =[];
if (data.res.rows.length > 0) {
for (var i = 0; i < data.res.rows.length; i++) {
this.archivedInserates.push({userName:data.res.rows.item(i).userName, email:
data.res.rows.item(i).email});
}
}
},(error) =>{
console.log("ERROR -> " + JSON.stringify(error.err));
});
}
With ionic beta 8 the lifecylcle events changed their names. Check out the official ionic blog for the full list of the lifecycle events.
if you are building data driven app then make sure use $ionicConfigProvider.views.maxCache(0);in your app.config so that each review can refresh for more details read this http://ionicframework.com/docs/api/provider/$ionicConfigProvider/