0

I am having a user fill out a contact form which includes a dropdown to select what county they are located in.

I am currently using ng-repeat to create 50+ options.

HTML:

<md-select name="county" ng-model="form.county">
    <md-option ng-repeat="county in counties" value="{{county.abbrev}}">{{county.abbrev}}</md-option>
</md-select>

JS:

.controller('slothController', function($scope) {
    $scope.counties = ('Not in California,Alameda,Alpine,Amador,Butte,Calaveras,Colusa,Contra Costa,Del Norte,El Dorado,Fresno,Glenn,Humboldt,Imperial,Inyo,Kern,Kings,Lake,Lassen,Los Angeles,Madera,Marin,Mariposa,Mendocino,Merced,Modoc,Mono,Monterey,Napa,Nevada,Orange,Placer,Plumas,Riverside,Sacramento,San Benito,San Bernardino,San Diego,San Francisco,San Joaquin,San Luis Obispo,San Mateo,Santa Barbara,Santa Clara,Santa Cruz,Shasta,Sierra,Siskiyou,Solano,Sonoma,Stanislaus,Sutter,Tehama,Trinity,Tulare,Tuolumne,Ventura,Yolo,Yuba').split(',').map(function(county) {
    return {abbrev: county};
})

This works perfectly on the users side, but once the user submits the form (I am also serializing it to JSON), and let's say they selected Santa Clara as their county.

I would receive an email that has ? string:Santa Clara ? as the form value for the county.

I want to get Santa Clara without the ? string: ? in my email.

I was looking at this thread earlier, but I couldn't find a good solution to my problem because ng-options does not work with md-select.

I would really appreciate it if someone can help me solve this problem, I have spend the past 8 hours trying to solve it.

Eugene Mihaylin
  • 1,736
  • 3
  • 16
  • 31
cmelone
  • 69
  • 2
  • 10
  • do you mean `county` instead of `country`? – cmelone May 11 '16 at 01:42
  • directly loop through json....and attack key as well as val to country.abbrev on fly...that's what the syntax does – Nishanth Matha May 11 '16 at 01:48
  • I'm getting this error: `Error: [ngRepeat:iidexp] '_item_' in '_item_ in _collection_' should be an identifier or '(_key_, _value_)' expression, but got 'country as county.abbrev for country'.` – cmelone May 11 '16 at 01:51
  • @CaetanoMelone It should be `county` not `country`... – Clint May 11 '16 at 03:08
  • @Clint, thanks. But I am still getting the same error as above. – cmelone May 11 '16 at 03:24
  • @Caetano Melone Problem must be in where you are serializing it to JSON. Otherwise I have tested, it is working fine. – Rakesh Chand May 11 '16 at 06:16
  • @Rakeschand, are you using angular material? For some reason I am still getting the same error as above – cmelone May 11 '16 at 13:33
  • yep i'm using angular material – Rakesh Chand May 11 '16 at 13:38
  • Can you take a look at this pen? http://codepen.io/cmelone/pen/LNaerb @Rakeschand – cmelone May 11 '16 at 14:35
  • I didn't suggested that. your commented code is working.. – Rakesh Chand May 11 '16 at 15:22
  • I'm still getting `? string:County ?` in the response. what do you use to serialize it to json? – cmelone May 11 '16 at 19:55
  • Is there a reason you are using jQuery, why not just use angular? There might be some weird things going on with indexing (as mentioned) because you're using ng-repeat for options then use jQuery to get the result. – Clint May 12 '16 at 01:52
  • I actually need jQuery anyways, and I got it to work by just removing the extra characters. – cmelone May 12 '16 at 02:54
  • 2
    What you are doing with the string splitting is very hacky and possibly not working in all browsers or future versions of angular/jquery. – kuhnroyal May 12 '16 at 12:12
  • What do you think could solve the issue I am having? Now I really don't want to use jQuery since it just brought up a bug in my web page. @kuhnroyal – cmelone May 12 '16 at 14:09
  • Something like this maybe, adjust the email. http://codepen.io/kuhnroyal/pen/pyYXNw – kuhnroyal May 12 '16 at 14:52
  • It works ok at first, but when I try to submit, I am getting these errors in my console. `POST https://formspree.io/caetanomelone@gmail.com 400 (BAD REQUEST)` and `Possibly unhandled rejection: {"data":{"error":"Can't send an empty form"},"status":400,"config":{"method":"POST","transformRequest":[null],"transformResponse":[null],"url":"https://formspree.io/caetanomelone@gmail.com","data":"Alpine","headers":{"Content-Type":"application/x-www-form-urlencoded","Accept":"application/json, text/plain, */*"}},"statusText":"BAD REQUEST"}` – cmelone May 12 '16 at 20:12

0 Answers0