CODEWITHSUNDEEP
javascriptangularjs
simple
simple

Reputation: 2397

Select a dropdown value using json

I need to select a drop-down value using json. I can easily pull data into my text input but how do I select a drop-down value?

http://plnkr.co/edit/R5RNruDNUydSJufVRIVh

Pull in the json:

app.controller('MainCtrl', function ($scope, $http, $log) {

  // bind json data to form
  $http.get('static.json').
    success(function(data, status, headers, config) {
      $scope.data = data;
  }).
  error(function(data, status, headers, config) {
    // log error
  });

});

Put the json data into our form:

<h4>Select value 2 using json data</h4>

<select data-ng-model="data.myDropdown.value">
  <option value="">Select a value</option>
  <option value="1">Value 1</option>
  <option value="2">Value 2</option>
</select>


<hr />

<h4>I can pull in json data into text inputs but not dropdowns.</h4>

<p><input type="text" name="textData" data-ng-model="data.textData"></p>

The json:

{
  "textData":"Example text data",
  "myDropdown":"value 2"
}

Upvotes: 0

Views: 298

Answers (2)

Alex Netkachov
Alex Netkachov

Reputation: 13522

First, value in data-ng-model="data.myDropdown.value" is not necessary. data.myDropdown is already a string so .value from it gives you undefined.

Second, the <option> is matched by the value, not by the text. So you either the JSON value should be changed to 2 or option's value should be changed to value 2.

Upvotes: 1

thllbrg
thllbrg

Reputation: 2007

Change your model to: 

<select data-ng-model="data.myDropdown">

And the value to: 

<option value="value 2">Value 2</option>

working plunk: http://plnkr.co/edit/zQR77KalooP1gUXRILV0

Upvotes: 1

Related Questions