I am making an app that shows a list of items, and that list can then be refined by multiple filters. If I were to fetch a list of those options from the URL string, then that would allow visitors to share (or bookmark) a link that takes you to a filtered list of data. But my questions is how would I write those options to the URL string?
So the idea is that once a select element has been changed, to refine the results. Let's say for example that it's just the order of the items.
<select ng-model="order" ng-change="changeOrder()">
<option ng-repeat="['date', 'amplitude', 'name'] as option">{{ option }}</option>
</select>
I would want to write that option into the URL string, so that it now contains (if you've selected amplitude) ?order=amplitude. Now, if you refresh the page, the data can easily be sorted by amplitude again.
But when there is a lot of those filters and sorting options, and they can be both set or reset to default, it becomes rather difficult to put those options all together, to check if an option is already in the string so as to not have it twice, and whether to add it behind a ? if there are no other options, or a & if there are other options already defined.
So in other words, what I want to know is does ngRoute provide methods to set parameters; not just read them? So I could do something like $routeParams.set("order", "amplitude").
If you want to change the URL, you should do this through the $location service.
Specifically the $location.search(search, paramValue) will allow you to change the query string values.
I made a plunk that demonstrates both using HTML5 mode and changing the $location using these functions. It can be found here. In order to see the URL change, click the pop-out button .
You don't have to do the string parsing yourself. AngularJS will also allow you (with the same function) to query the currently set parameters. So it's a matter of querying all the URL values, changing the one for which filter you're changing, and then setting the values back.
This is what the second button in the example demonstrates. Even though the first button will only set its own value (and remove the others), the second button will keep all other items as well.
The relevant code:
var values = $location.search();
values.orderThatsUpdating = newOrderValue;
$location.search(values);
Related
I have a program that needs to check an API for all the current users on the system, and then present a form to an administrator who can decide which ones to give certain powers. I can't figure out how to get the information modeled into my formData in order to do this. I have this but it does not work:
<p ng-repeat="f in mdfields"><input type="checkbox" ng-model="formData.checkboxes" ng-true-value="{{f}}"> {{f}}</p>
The mdfields is just an array of every user's name.
That may give you an idea though of what I want: I just want to display all the names of users, and let the admin select as many of them as he wants, then have that information available to $scope.formData so I can pass it to another API call and do stuff.
Edit: To clarify a bit, the list of checkboxes that gets called can change often, and ideally, I want the ability to send some data back to the server that says specifically something like:
["jao smith":true]
["frank jones":false]
although it would be fine to send back to server only the names of people who have been checked.
Without knowing more about you models there are several ways you can do it:
As property of fobject - can filter mdfields array to find selected:
<input ng-model="f.selected">
All in one scope variable array (not a good choice if doing any filtering because indexing changes):
<input ng-model="formData.checkboxes[$index]"
ng-init="formData.checkboxes[$index]=formData.checkboxes[$index]|false">
In a scope variable object - easy to collect selected by id
<input ng-model="formData.checkboxes[f.id]">
OK, I'm very new to AngularJS. I'm converting a rather rough-app (that I've been writing for a couple of days) from using mostly jQuery over to using Angular. [ I discovered Angular "mid-stream", while researching how to alleviate all the bookmark and back-button headaches I was running into.]
On my main page, I have a table of search results. (If the user arrives without passing any parameters, a default search is called to build the table. And, of course, they can use a search form on that page to show themselves a different set of results.)
Now, when the user clicks on a table item, I want that table to more or less "become" a drop-down menu on the Item Details page that can be used to navigate from one table item to the next. (The list will usually be less than 20 items long at any given time.) Same data, same sort order, just in a different control.
Rather than build that "Child" page so that (in addition to making Ajax calls to pull up the item details) it runs the exact same query AGAIN and then builds a drop-down out of it... I thought perhaps there was some more-efficient way to do it.
Perhaps, pass the entire object of objects from the search results on to the Details controller? (I would somehow have to also pass an id for whichever item the user actually clicked on for details as well.)
[With jQuery, I had been building both the drop-down and the table of results on the same page...and then just use show() and hide() to alternate which one I was displaying. And I would fetch the Item Details data and populate/show hidden details divs whenever a table row or drop-down option was selected.]
First I think you should use some kind of routing, maybe this can be helpful
https://github.com/angular-ui/ui-router
And second one, if you want to access same object with multiple controllers, you should use factory with your object, and all you need is to inject that factory into your controllers, and you will have access to the same object from multiple controllers. Here is the short tutorial, it's very easy to understand:
https://egghead.io/lessons/angularjs-sharing-data-between-controllers
And third option, but it's not nice, is to emit or broadcast event and send object from one controller, and in another one you can put a listener for that event, here you can find more information:
http://www.theroks.com/angularjs-communication-controllers/
http://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/
I'm having trouble using ng-options with filters.
The problem is that when an option is removed by a filter, the model of the select element retains the value of the removed option.
Here is a plunker. I have two filters working on the ng-options set. One that removes duplicates from the list of options, and one that removes nulls. You can see the problem I am speaking of by following these steps.
In the "Preferred Email" dropdown, select the last email option, 'jimbob#yahoob.com'.
Delete the text in the "Other Email" input box.
You can see now that because "Other Email" is null, it is no longer an available option, and the dropdown has defaulted to "Please Select Preferred Email". However the model of the select element still has that object assigned to it.
Same problem different context.
In the "Preferred Email" dropdown, select the option 'jimbob#yahooz.com'.
Now delete the 'z' in "jimbob#yahooz.com"
Upon doing so, the values in the two input boxes ('Email' and 'Home Email') become duplicates, and the second one ('Home Email') becomes filtered out of the available options. However the object that was just filtered remains assigned to the model.
Edit: My solution (Can anyone do better?)
Here (plunker) is the best I could come up with. I'm new to angular and can't help but think there is a better way to do this, I think this solution is "bad" but it works.
Essentially I pass into the filters a reference to the scope (this.contact) along with the name of which default item I am working with ('default_email' or 'default_phone'). If the filter is removing an item from the options set, it checks if it is the default, and if it is, sets the default to undefined.
I also added a bit more code, to get more context as to what I am working towards.
I know this is old, but I spent a long time trying to figure out the best way to handle this.
Turns out it's fixed in Angular 1.4! Try replacing the Angular version in your original plunker with 1.4, and the problem just goes away. I found this out by trying various versions until I narrowed it down.
I have a select box, and I load the form using a JSON request on load. As angularjs may take a little time to load the data, I added a temporary option in there:
<option value="">Loading...</option>
What I want to do, is clear this once my model is loaded. What currently happens, is it just appends the list to the select box, and leaves the Loading... option in there as choice #0.
I believe the default behaviour is just to append, rather than replace. How would I go abouts doing this? I can't seem to find any examples around for this particular issue.
Here's a plunk: http://plnkr.co/edit/zRQCPrMzvN8Rcg8ZyTu0?p=preview
This is pretty easy to do with Angular.
All you have to do is data-bind the default option to a variable and change that variable when the http call comes through. Here is a plunk demonstrating the same.
http://plnkr.co/edit/Vn4L5boLodSi6puzM6gh
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>