CODEWITHSUNDEEP
angularjsangularjs-ng-repeatangularjs-ng-options
Duong Truong
Duong Truong

Reputation: 29

how to get selected value of ng-options inside ng-repeat in a form

I'm trying to get the selected value when clicking the submit button of a form which contain ng-repeat and the select generated by ng-options. But I can not reach the selected value, can you please take a look at my code and tell me what I'm I missing?

<form class="form-horizontal">
<!-- Options -->
<div class="product-page-options">
    <div class="form-group clearfix" ng-repeat="option in product.options.data">
        <label class="col-md-4 control-label pull-left">{{ option.name }}</label>
        <div class="col-md-8">
            <select class="form-control" ng-options="value.name for value in option.values.data" ng-model="selectedValue">
                <option value="">Select {{ option.name }}</option>
            </select>
        </div>
    </div>
</div>

<!-- Add to cart -->
<div class="product-page-cart">
<div class="product-quantity">
  <input type="number" value="1" class="form-control input-sm">
</div>
<button class="btn btn-primary" type="submit" ng-click="add(selectedValue)">Add to cart</button>

I have tried to print the selected value by putting 

{{ selectedValue }}
inside the ng-repeat div and it display perfectly as expected, however if I try to put it outside of the div then nothing print out.

The json data which i'm used to build the form here http://pastebin.com/nah3Pt5r

// Edit:

I just googled and found a fiddle doing like me: http://jsfiddle.net/DrQ77/ so I decided to modify the ng-model to selected[option.name] but the $scope.selected still show undefined.

// Edit 2: Okay, problem solved by adding the 

$scope.selected = {};
in the controller.

Thank you for your time!

Upvotes: 2

Views: 2829

Answers (1)

cverb
cverb

Reputation: 643

Your ng-options has an isolated scope. So inside the selectedValue is known, but outside it's not (as you state in your question).

Define a variable on your parent scope and assign that to your ng-model of your ng-options and you should be able to access that variable outside your ng-options.

Upvotes: 1

Related Questions