Stephen L
Stephen L

Reputation: 185

how to store html 'select' control input to the JSON object using ng-model in AngularJS?

i am binding the 'select' input control to each row using ng-repeat.After binding i want to store the selected value in the 'select' control to JSON object using ng-model.how to acieve this?

my code:

<table>
    <tr ng-repeat="(refreshments,price) in items">
           <td>
             <label>{{refreshments}}</label>
            </td>
            <td style="padding-left:500px">
            </td>
            <td>
              <label>{{price}}</label>
            </td>
            <td class="td_width">
            </td>
            <td>
               <select ng-model="quantity">
                  <option value="0">0</option>
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
               </select>
            </td>
           </tr>
  </table>

JSON object:

var JSONObject= {"quantity":"{{ quantity }}"};

Just i need to bind the selected quantity in the JSON Object. my ng-repeat has morethan one row & for each row i am binding the select option through ng-repeat.

Thanks in advance, Stephen.L

Upvotes: 0

Views: 716

Answers (2)

Oleg
Oleg

Reputation: 23277

Try this:

var JSONObject = {};
$scope.$watch('quantity', function(newValue) {
    JSONObject.quantity = newValue;
});

Explaination

$scope's $watch method registers a listener callback which will be executed every time when model value (in your case quantity) is changed. So you can be sure that JSONObject.quantity property always reflects an actual quantity state.

More details you can find in a documentation.

Upvotes: 2

dhavalcengg
dhavalcengg

Reputation: 4713

Do like this:

var JSONObject = {};
JSONObject.quantity = scope.quantity;

Upvotes: 1

Related Questions