Dynamically create angular checkboxes and get their values - angularjs

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]">

Related

Can I set a parameter using ngRoute?

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);

Outputting Stripe plan name via plan-ID using AngularJS ng-model two-way data binding

I am outputting form inputs on the final page of a checkout field, titled "Review & checkout"... on this page I display the plan the customer picked and the personal info they provided so far.
I have no problem showing fields like Name or Email, as the value inputted is being shown, as Angular displays whatever was in the value="" field of the input.
To display the subscription plan that the customer picked, it's trickier.
The value field is already being utilized to tell stripe which plan the customer should be charged for.
How can I get around this problem?
I am able to display the stripe-id for the plan but it is not user-friendly. They are id's like trad-2-5, trad-2-6, trad-2-7... so what I want to do is display a custom title when trad-2-5 is selected, and so on...
Any help is greatly appreciated!!Thanks
There are a couple of ways you could do this.
The really silly answer is that you can just create a map of plan ids to human-readable descriptions in the Angular controller code, then display that. This might be enough for what you want, but it's also pretty hacky, and not a lot of fun to maintain.
The less silly answer depends on where these plan ids are coming from. If they are coming from an endpoint on your server, which gets them from Stripe's plans endpoint, then you could also pass along the display name of the plan from that endpoint. If the plan id's are hard coded somewhere, or whitelisted, then this may not make sense. However, that display name is what will appear on the customer's invoice, and credit card statement, so it'd be nice to make it match up with what they see on the checkout page.

How to let the backend service know which form fields were modified

In my Angular app I have a form, which is used to edit existing records.
Once a record is edited, it is being sent to a WebAPI service to update the database.
Is there a way to make the WebAPI PUT method aware of which specific fields were modified, so there would be no need to override all of them?
AFAIK, there is no way for the backend to know which fields have changed.
The front end however, can inform the backend of the changed fields.
Let us say you have the following form:
<form name="example">
<input type="text" name="color">
</form>
If you want to check if the input field was changed, you can use the following code in your controller - $scope.example.color.$dirty which will return a boolean value indicating if the form input was changed or not.
You can then pass this information along with the information present in the form to the backend which can then decide which fields to update.
You can take a look at this article which explains form validation (and this process explains $dirty) which you may find useful.

how retrieve only selected checkbox values in action class in struts 1.3

i am new struts i am developing web application in which i have a requirement that i have to show records in tabular format i have made use of display tag in struts with every record i have a checkbox now i need to retrieve the values of those checkboxes in my Action which are checked . but what i am receiving in Action array of all the checkboxes. actually while displaying checkboxes by making use of display tag all checkbobes have got same name therefore i am not understanding how handle this care i have searched on google but did not find suitable situation
<display:column title="Service">
<input type="checkbox" name="sercive" />
</display:column>
how to handle this situation not understanding .could anyone give some sample code
or hint to handle this situation
I am not sure about display tag.
But in struts you have to define a property in Form bean (i.e. ActionForm) of type String[] or List with the name same as defined for your check boxes.
Then in Action class you will get the array of selected checkboxes only.
If this is not working. Then you can try of getting the values using request.getParameter("service"). This will return comma separated list of selected checkboxes which you can convert to array using split() method and then you can continue with your logic.
I hope this helps you.
Plain HTML checkboxes are only submitted if they're checked, that's just how clients work.
You must provide a differentiating factor, generally a value (e.g., a service ID in your case), to determine which has been selected. Your action form would contain a collection of those IDs.

Cognos : Persisting Checkbox state across Multiple Pages

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>

Resources