is there a way to query a MongoDB collection, return the results, use an AngularJS ng-repeat to iterate through the results, BUT BEGIN the iteration at a specific position in the results, somewhere in the middle for example?
I am currently returning a query to an angular view; a category of materials. Then i have my view set up to paginate(ng-repeat) through the results. However, no matter what material I click on to bring me into the view (from a different view), the ng-repeat always starts at the beginning of the materials list, rather than on the material i clicked. Any thoughts?
I do not believe the mongodb part has anything to do with the actual question but ill give you 2 options:
The quick way:
<div ng-repeat="item in items" ng-show="$index >= myCtrl.startPoint">
While this will do the trick you might want to do the ng-show expression with a filter. In addition you might run into performance issues. You should also use the track by feature.
A better way would be to have a filteredData model for the ng-repeat and do the correct filtering once per action. You would have to make sure yourself that the model is updated on every data change and every user input.
There are many choices in between these 2 options but what to use depends on your needs. For instance - does user input change frequently? Is your data updated frequently? etc.
Related
I'm having to move a project from rails to angular, Much to my disgrace.
How would i go about changing this
<% if souporder.datefrom > Time.now %>
into angular terms?
heres my code
<tr ng-repeat="soup in souporders">
<td>{{soup.id}}</td>
<td>{{soup.soup}}</td>
<td>{{soup.datefrom}}</td>
<td>{{soup.dateto}}</td>
</tr>
Edit
This is in my view
<div ng-repeat="soup in souporders">
<tr ng-if="date == soup.datefrom">
And this is in my controller
$scope.date = new Date();
You clarified in the comments that you only need this calculated on page refresh, which is pretty simple and doesn't require much angular magic.
On initializing the view's controller, simply set a variable whether or not the order date is in the future or not and expose it on the scope. Then bind directly to it, and use the bindonce functionality {{:myvariable}} to improve performance because it won't be changing anyway.
Depending on your needs, you can even have the server calculate that value and return it as a property of each order in your JSON array of orders. (I'm guessing a bit at what you're doing, but you can adapt the answer if you're not doing what I think you're doing.)
Update: I just realized that perhaps your objective is not to do something special with each row based on the date, but to filter the list based on the date. Most of my answer still stands, but you can forget about the bindonce spiel. What you need is called an angular filter on ng-repeat and is done using the pipe (|) character. You can read all about it by searching the topic. There are examples in the angularjs docs. But basically, instead of:
<tr ng-repeat="soup in souporders">
<td>{{soup.id}}</td>
<td>{{soup.soup}}</td>
<td>{{soup.datefrom}}</td>
<td>{{soup.dateto}}</td>
<td>{{:soup.active}}</> <!--do something nice here instead of just displaying true/false --->
</tr>
You might want:
<tr ng-repeat="soup in souporders | filter:{current: true}">
...etc
</tr>
Either on the server or on the client, when you load the data from the server, you can add a boolean property to the items in the souporders array that says whether it's current or not.
What this accomplishes:
You have a filtered list of items based on a property that does NOT change dynamically and requires a page reload to update. But it's fast (but not the fastest it could be if you really need to go crazy - don't prematurely optimize, you'll know what to do when the time comes to do it, and that time isn't now).
Why it's not that great:
It isn't dynamic and it isn't angular-y or declarative. But based on your requirements, it's a solution. I'd spend some time considering if you want this to be dynamic, and if not, why the items that aren't showing are even returned from the server. Are they used elsewhere on the page?
I have an obviously simple but yet challenging problem in my AngularJS app:
When using orderBy on the view I loose the correlation between the order of the related model and the view order.
What I want to do: My view is a table. I want to set a highlight class for the selected row and I want to use cursor up/down keys to move this highlight.
I tried to decouple $index from the tracking by using track by currentDocument.objectid, but that doesn't seem to work.
How can I correlate the currently highlighted row in the view with the currently highlighted element of the related model in a way that I can use -1 or +1 with the cursor keys?
As the order of the data is important to your business process, it makes sense to make the order part of your actual model. If you read the last example of orderby on the angular api (https://docs.angularjs.org/api/ng/filter/orderBy), you will notice they achieve this very thing. Basically, instead of binding orderby directly to some model value, create your own order function and manually order your model.
I have created a plunker here: http://plnkr.co/edit/oM97ZTAIHTjI6YFiGDwI?p=preview Just click on the persons name to see the example (and reorder the list and try again).
Basically you create a manual sort function like this:
$scope.order = function(predicate, reverse) {
$scope.friends = orderBy($scope.friends, predicate, reverse);
};
Which actually reorders the model itself, rather than just the view array. You can call it however you like. Then you can simply pass $index from the view, and it will correlate correctly to the view order.
I'm new to Angular and am implementing something that requires a large ng-repeat loop. Of all the things in the loop I'm only showing one however. I show it using ng-if (ng-if over ng-show so as to remove all other elements from the DOM). My question is: if I have considerable amounts of data inside the elements whos ng-if statements don't evaluate to true, for example some images or very big tables, is that data still downloaded by a user accessing the page with the ng-repeat and ng-if statements on? I.e If I had my ng-repeat repeating 10 times and each time generating a div containing a 100,000 row table, even though only one of the tables shown via the use of ng-if, are all of the other tables evaluated and so downloaded by the user? This is in the interest of bandwidth.
I hope that made sense. For illustration purposes here's an example
<div ng-repeat="foo in bars">
<div ng-if="foo.property == 1">
{{ foo.veryBigTable }}
</div>
</div>
You are actually mixing two parts of a web application i.e. your server side code and your client side angular code.
The answer to your question is Yes, i.e. the whole data will be downloaded from server irrespective of your ng-if condition.
Since you will be populating your data in scope element bars somewhere in your code which will contain all data returned from server and server does not know the conditional data you implemented in the HTML. Its up to the HTML code to display the displayable data based on ng-if condition.
So you need to modify your server code to only send that amount of data which is going to be displayed. This is the way you can save your bandwidth.
Hope, you got my point!
I'm trying to emulate a spreadsheet using AngularJS and ng-grid. My needs are simple but I cannot find anything anywhere that will help me fix my code.
I have a simple table of scores and in the last column I need a "Total Score" column.
You can see my code at this plunk.
My problem is that though I was able to get the total in each row on document.load, I cannot make the "Total" column update whenever any of the scores are changed.
Or alternatively, you could add the getTotal() function directly to the model object:
http://plnkr.co/edit/LhlK1C?p=preview
I prefer solutions where I don't have to work with $watch(), but it depends if you want the total to be stored in your model or only need it for display.
You could watch for changes to the 'original_data' object and recreate the process_data object every time updates.
http://plnkr.co/edit/c4iynItnznKNRoFgeuio?p=preview
On the Cognos Report Results Page, we need to have a checkbox for each row.
The checkbox is designed using HTMLITEM tag.
However, the problem we face is that the state of the checkbox (checked or unchecked) is not persisted when we go to the next page/previous page.
I am very new to Cognos and I need to know if there is a way to do this.
I am fairly good at JAVAScripting and JSP, but since we only have access to HTML elements and not JSP Tags (Cognos uses CGI anyways), I cannot get the request object.
If there is some way to retrieve the request objects parameters of previous submit(previous page), that would help in solving the issue to a large extent, I feel.
Jonas
There isn't really enough information on what your end goal is to be able to assist you with this properly. There are a few ways that spring to mind that would allow you to use JS on the report to remember previously checked items, but there may be a much better way to do this depending on your requirements.
Without having more details, the first thing that leaps to mind is simply having some JavaScript set and unset cookie values on check/uncheck on the checkbox.
Note, there could be a variety of other ways to work this, including upping the number of visible rows per page, etc...
You can create a dataitem in a query where you can determine whether your checkbox should be checked or not. In the design of your list on the report page you can render a HTMLItem within the list, and base the HTMLItem on a DataItem. Your HTML must than be something like
<input type="checkbox" value="""+ [DataItemValueToPass] + """ " + [DataItemCheckedOrNot] ></input>