angular js wrong select value submitted to mvc controller

Question

I have an asp.net mvc application where I do some calculations based on what is selected in a selection box:

@model ProductOrderViewModel
...
<select id="unitSelectionBox" 
 name="@Html.NameFor(x => x.SelectedUnit)" class="form-control" ng-model="pricePerUnit">
@foreach (var productUnit in Model.Product.ProductUnits)
{
    <option value="@productUnit.Id" ng-true-value="@productUnit.Price">
        @productUnit.Name
    </option>
}
</select>
Selected unit price:  {{pricePerUnit | currency}}

Where I have productUnit.Id as value, but productUnit.Price as ng-true-value. However when I try to submit, instead of the selected value, the price is getting submitted instead of the selected id.

Is there a way in angular to use the price for calculation yet submit an id as value? Maybe something like this:

<option ng-submit-value="@productUnit.Id" ng-true-value="@productUnit.Price">
    @productUnit.Name
</option>

Spluf · Accepted Answer · 2016-04-18 07:44:12Z

1

you're kinda hacking angularjs with that select. It already has a way to populate your select list dynamically and you should use that in stead of your loop.

<form name="myForm">
    <label for="repeatSelect"> Repeat select: </label>
    <select name="repeatSelect" id="repeatSelect" ng-model="data.repeatSelect">
      <option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
    </select>
  </form>

this will do everything you are looking for and it also looks better :). Also, you can do an [ng-change="function()"] to send the price to your function.

also check here for more info:

https://docs.angularjs.org/api/ng/directive/select

edited Apr 18, 2016 at 7:44

answered Apr 18, 2016 at 7:26

Spluf

8201 gold badge11 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Igor Monteiro Over a year ago

nice answer, this was helpfull.

Walfrat · Accepted Answer · 2016-04-18 07:28:00Z

0

ng-true-value is not for option tag. Use ng-options

<select name="repeatSelect" id="repeatSelect" 
ng-model="data.repeatSelect" 
ng-options="option.id as option.name for option in data.availableOptions">
</select>

answered Apr 18, 2016 at 7:28

Walfrat

5,3941 gold badge18 silver badges36 bronze badges

Comments

J. Rahmati · Accepted Answer · 2016-04-18 11:38:28Z

Got it working by adding following code to my razor view:

<script type="text/javascript">
    var jsAvailableOptions = @Html.Raw(
        Json.Encode(
            Model.Product.ProductUnits.Select(
                x=>new { x.Id, x.Name, x.Price }
            )
        )
    );
    myApp.controller('DetailsController', ['$scope', function($scope) {
        $scope.pricePerUnit = {
            selectedOption: null,
            availableOptions: jsAvailableOptions
        };
    }]);
</script>

<select name="@Html.NameFor(x => x.SelectedUnit)"
    ng-options="option.Name for option in pricePerUnit.availableOptions track by option.Id"
    ng-model="pricePerUnit.selectedOption">
</select>

Selected unit name: {{pricePerUnit.selectedOption.Name}}
Selected unit price: {{pricePerUnit.selectedOption.Price | currency}}

What I needed seemed to be the track by option.

Collectives™ on Stack Overflow

angular js wrong select value submitted to mvc controller

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related