AngularJS ng-selected

Question

I am using the following code in my website. Everything is working fine but whenever I select a value in the first select, the second select always returns selected value as A, even if I select B in the second select. Could anyone tell me what the problem is.

     <span ng-show="a.Action">Called</span><select name="First" form="{{a.ID}}" ng-model="Calling" ng-show="!a.Action">
                            <option value="">Not Called</option><option value="C">Called</option>
                    </select>
                        </td>
                        <td colspan="1">
                         <select name="Second"  form="{{a.ID}}" ng-disabled="Calling==C" ng-show="!a.Action">
                            <option value="A" ng-selected="a.Disposition == 'A'">A</option>
                            <option value="B" ng-selected="a.Disposition == 'B'">B</option>
                         </select>
                          <select name="Second"  form="{{a.ID}}"  ng-show="a.Action">
                            <option value="A" ng-selected="a.Disposition == 'A'">A</option>
                            <option value="B" selected="selected" ng-selected="a.Disposition == 'B'">B</option>
                          </select>

That is my angular code in the html file. The form is submitted to a php file, where the value of $_POST[Second] is always A whenever value in a.Disposition is A/blank and always B if value in a.Disposition is B when the page loads. I change the default selected value in the Second select box. Yet that value does not get passed. However, after the First select statement is removed, i.e, when a value exists in a.Action then the Second select statement works fine. Could anyone tell me why that is happening and how do I circumvent this problem?

Can you add a fiddle for the same code? – Vipul Panth Jul 05 '17 at 06:58 — Vipul Panth, Jul 05 '17 at 06:58

score -1 · Answer 1 · answered Jul 05 '17 at 07:05

In both your "select" statements you have a "ng-selected" which is responsible for the selected default value, but since you did not declare a "ng-value" the chosen value is not considered in the controller model. You should bind the select with a model using

<select name="Second" ng-value="yourModel" form="{{a.ID}}" ng-disabled="Calling==C" ng-show="!a.Action">
    <option value="A" ng-selected="a.Disposition == 'A'">A</option>
    <option value="B" ng-selected="a.Disposition == 'B'">B</option>
</select>

then the chosen value will be stored in the controller side as

$scope.yourModel

How would I send this chosen value along with the headers when the form is submitted. I am newbie to angular, so dont know much. And why does this problem not arise when the first select doesnt exist(or isnt shown whenever a.Action has a set value)? The Second select works fine then. Why is that? — Aditya Singhal, Jul 05 '17 at 07:26

AngularJS ng-selected

1 Answers1