CODEWITHSUNDEEP
angularjshtml
Brandon Wilson
Brandon Wilson

Reputation: 4590

ng-options Default Value from JSON

I have been toying around with a modal form, the form works great to submit data, but now I need the form to edit data. So I want to populate the form from a callback from the server. The structure of the form is as follows:

HTML:

<div class="form-group modalContent">
   <label for="manufacturer">MANUFACTURER</label>
   <select class="form-control" id="manufacturersList"
      ng-model="form.manufacturers" required
      ng-options="man.manufacturer for man in manufacturers | orderBy:'manufacturer'"></select>
</div>

AngularJS:

$scope.form = {
   //The value will be the value from the callback
   "manufacturers": "Acer"
}

EDIT: CALL BACK

    {"status":{"error":"none","code":200,"description":"none","message":"success"},"manufacturers":[{"manID":"2",
"manufacturer":"Acer"},{"manID":"3","manufacturer":"Honeywell"},{"manID":"11","manufacturer":"HP"},{"manID":"9","manufacturer":"Juniper"},{"manID":"1","manufacturer":"Lenovo"},{"manID":"6","manufacturer":"Logitech"},{"manID":"8","manufacturer":"Netgear"},{"manID":"7","manufacturer":"Other"},{"manID":"10","manufacturer":"StarTech"},{"manID":"5","manufacturer":"Viewsonic"},{"manID":"4","manufacturer":"Zebra"}]}

Shouldn't this populate the value in the <SELECT>?

Upvotes: 0

Views: 86

Answers (1)

Kirill Slatin
Kirill Slatin

Reputation: 6143

ng-model points to the variable that holds the selected value. And according to the syntax you used in ng-options you should place manufactures in $scope directly.

<select class="form-control" id="manufacturersList"
  ng-model="selectedManufacturer" required
  ng-options="man for man in manufacturers | orderBy:'manufacturer'">
</select>

$scope.manufacturers = ["Acer", 'HP', 'Toshiba', 'Lenovo', 'ASUS'];

Example in Plunker

Hope this helps

Upvotes: 1

Related Questions