How would/can you populate a ng-admin "choice" field using angular $http.get method call?
Something like this would pull a list of companies from the '/companies' endpoint and populate the select field with it. It will also highlight the currently selected company. It won't be a "choice" kind of field.
nga.field('company.id', 'reference')
.label('Company')
.targetEntity(admin.getEntity('companies'))
.targetField(nga.field('name'))
.validation({required: true }),
You can try creating a custom directive, but you'll have to dig through the ng-admin internals to make sure you work with their API. And then you'll have to pray they don't change that api. Custom directives are easier to think about and manage if you're saving one field at a time and not filling out a huge form. But if you're saving one field at a time, you'll operating outside of ng-admin and if you do enough of those tricks, then you won't need ng-admin other than for basic listings and pagination.
You're probably looking for the 'reference' field (see documentation). If this doesn't fit your need, you'll have to use a custom directive using ui-select (already used by ng-admin) and a custom Restangular call.
Pointers:
ng-admin's ma-choice-field directive
a directive making custom HTTP calls on ng-admin-demo
Related
Im trying to implement Bootstrap Typeahead in my AngularJS project and I came across an issue with values.
Im loading the content via $http from my Django API server. For now, I can lookup for any item I want and display it's name, but what I need is to display "title" but return "id" via ng-model back to the controller.
Do you have any working example of doing this?
http://pastebin.com/xtype9J4
I'm assuming you are using https://angular-ui.github.io/bootstrap/#/typeahead, so I'd suggest having a look at the last example.
Looking at the DOM, your code could look something like this:
uib-typeahead="company as company.name for company in getCompanies($viewValue)"
This pretty much contains exactly what you need. Additionally, take a look at https://docs.angularjs.org/api/ng/directive/select and https://docs.angularjs.org/api/ng/directive/ngOptions for further examples, as AngularUI has a similar (if not identical) approach.
I'm new to angular and trying to figure out how best to accomplish this.
Say you have set up an ngResource factory to get a bunch of widgets . You return those widgets(GET /api/widgets) and display them on the page in a list.
Now say you can edit those widgets in a dialog box by clicking an edit button next to the object in the list. Is it better practice to pass the individual widget's data (that was already retrieved by the first $resource call) to the edit dialog, or simply pass an ID parameter to the dialog box and have it resolve it's own $resource call using a separate GET /api/widgets/:widgetID call.
The data wouldn't realistically change between loading the list and clicking the edit button, so it doesn't need to be synced to the exact second. Both of these requests would come from the same factory, but the question is if you should store the data and pass it, or execute a separate request.
I don't see a reason to fetch it again, I would just reuse the object.
The typeahead example (http://angular-ui.github.io/bootstrap/#/typeahead) mentions it's easy to implement a back end into this autocomplete, but provides no example. What interests me in particular is finding out the currently entered string so that I can send that to the server and send back an already filtered result - I would like to do this optimization server-side and minimize my queries, I don't think returning the whole result set and just excluding non-matching items for display is feasible for an app that has over 200,000 entries in the database.
Should I, in this case, forget about typeahead altogether and implement a custom solution with a dropdown, or is there a way to do this easily?
There is a way to implement this very easily, no need to roll out your custom solution (at least not for this case!). Basically you can use any function as part of the typeaheads expression, ex.:
<input type="text" ng-model="selected" typeahead="state for state in getStates($viewValue)">
As you can see from this example the getStates($viewValue) method (defined on a scope) can be called and the $viewValue corresponds to a value entered by a user.
What is the best here is that your function can return a promise and this promise will be correctly recognized by the typeahead.
Some time ago I've written a sample plunk that shows how to use server-side calls to provide auto-complete. Check this plunk that shows autocomplete for all the cities in US (based on geobytes.com), where cities are queried live from a JSONP service:
http://plnkr.co/edit/t1neIS?p=preview
Check it out for a working example on how to do filtering on the server side (you need to type at least 3 characters to see results). Of course you are not limited to jsonp calls, you can use any method returning a promise.
Don't have the rep to comment so posting as an answer (sorry!)
If you are using a newer version of bootstrap you need to add uib- in front of typeahead (like so)
<input type="text" ng-model="selected" uib-typeahead="state for state in getStates($viewValue)">
I need to remove all br tags from the json data I am working with before rendering to the template.
Im wondering if there is a pre-existing angular directive which could be used for this, or if there is a way to do it by creating a custom filter. The documantation on filters doesnt seem to be easily adaptable to this usecase.
Do you need to remove <br>s from a specific object property like remove HTML from a string (in JSON response) or do you need to remove them from all properties of the JSON object?
You should be able to just put some JavaScript code into a custom filter (the custom filter would return either a modified JSON object or a new object), and then call that filter from your HTML when you want to display the JSON.
If you are displaying different parts of your JSON object using different ng-repeat, ng-show, etc. directives, it might make more sense to filter the JSON once in your controller, then use the filtered version in the HTML/template. A little more information about your actual use case would help.
Is there any way I can access the form elements in view like textbox or selectbox(combobox) from controller without submitting form in view?
That is impossible. The only way data gets to the server is if its submitted, be it via normal means or ajax, post or get.
I think you are looking for a way to submit the form without reloading the page, which would be ajax. You can use something like jQuery that has a nice framework to do this easily. you can use the .post()/.get() and .serialize() methods
http://api.jquery.com/serialize/
http://api.jquery.com/jQuery.post/
http://api.jquery.com/jQuery.get/