Select input with custom option values

[vasile....@gmail.com]

Hi guys.

There is a similar topic here: https://groups.google.com/forum/?fromgroups=#!topic/angular/7Ro6iMeU208 .

But the answers are not related to the question.

What I want to achieve is

<select>

<option value="one">one</option>

<option value="two">two</option>

<select>

the code 

    $scope.items = [

        {name:'one', value:'one'},

        {name:'two', value:'two'}

    ];

$scope.original_value = $scope.items[0];

<select ng-model="original_value" ng-options="item.name for item in items"></select>

generates

<select>

<option value="0">One</option>

<option value="1">Two</option>

<select>

http://jsfiddle.net/F5Lay/1/

People are asking about this all over the internet and I've spent the last hour trying to make this work.

Please help.

[Peter Bacon Darwin]

Here you go: http://plnkr.co/edit/Z3XH4W?p=preview

<select ng-model="original_value" ng-options="item.name as item.value for item in items"></select>

Pte

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

[vasile....@gmail.com]

Thank you, but how is that helping me? I've seen similar answers on a couple of forums.

The values are still 0 and 1.

I added a <input type="hidden" value={{original_value}}> , but it's a stupid way to do it.

I cannot believe that this is so difficult.

[Peter Bacon Darwin]

Oh I get it. You want to set the value of the actual element?
That is not very angularjs. My example ensures that the value is put into the model.

Pete
...from my mobile.

[vasile....@gmail.com]

And how do I get the value when submitting the form? I need to send it to the server side through post.

[Michael Bielski]

I struggled with this a while back, and the solution that Peter suggests actually works very well. Angular is really set up to use JSON, so POSTing your data should be done by sending a JSON object.

var MP = $http({method: "POST", url: "your/url", data: JSONobject});

or

var MP = $http({method:"POST", url:"your/url", data: {"blah":[{"blah":"blah", "blah":"blah"}]} });

[vasile....@gmail.com]

But I don't understand why the values are't the actual option content.

I can't submit the for through AJAX because it's huge. I am also cloning some inputs and I can't use models on them.

[Michael Bielski]

The point isn't what the options do or do not have as values, the point is that the correct data gets submitted. AngularJS relies heavily on data binding so regardless of what the value of the option is on the screen, the correct data will be sent to the server. You have to let go of some traditional concepts and take a little on faith that Angular will get things right.

Regarding form submissions being too large for AJAX, I highly doubt it. Unless you are uploading images (a whole other topic entirely) form data is entirely text (even if you use an RCE like TinyMCE) and I have yet to see a form post without images go above the limits of what can be handled by the browser. Even a couple of megs of text should be handled quickly and easily.

[vasile....@gmail.com]

Thanks for the answer.

My reason for being anti-AJAX was that I am cloning the input.

I have a "add more" button that uses jQuery .clone function to duplicate inputs. I was planning to submit them as arrays using something like name="example[]".

But after cloning, inputs have the same model, and even if it would work, I'm presuming this is not a good practice.

At the moment I'm stuck. I have a huge dorm with over 50 select values taken from the Angular model.

I'll have to ditch angular and move all the data inside <options> tags if I can't pull this off.

[Peter Bacon Darwin]

I think the problem is that you are haven't embraced the Angular Way(tm)!  You should not be using jQuery to clone inputs if you are using Angular.  Put them in an ng-repeat block, then Angular will do all the hard work for you.

Pete

--

[vasile....@gmail.com]

I know, I just haven't got the time to do it now. I'm removing Angular from my project because I can't deliver on time with all this issues.

I have blocks of inputs:

<div>

    <input name="address[]">

    <input name="city[]">

    <select name="something">

        <option>1</>

    </select>

     ...

</div>

<a id="clone">Add another address</a>

I am cloning the divs and parsing the POST data as arrays.

It took me too long to get nowhere tinkering with Angular.

[Trip Levine]

Hey folks, same problem here. I don't need to send ID's back to the server, I just need to send values. Values that equal things like "cat", "dog", or numbers like "1200", "300".. Is this technically impossible with Angular?

[Michael Bielski]

Sure. Just depends upon how you set up your repeater. Explore the options for ng-repeat and ng-select and you'll see that there are plenty to choose from.

[Alex D]

Great thanks for this, I'm too stucked on options values :) I simple forgot to check model value... Thanks

пятница, 26 октября 2012 г., 21:12:55 UTC+7 пользователь Pete Bacon Darwin написал: