CODEWITHSUNDEEP
javascripthtmlangularjs
Alexio Cassani
Alexio Cassani

Reputation: 277

AngularJs doesn't update select in the html even if the model is pre-initialized

My HTML is:

  <label> Size Scale:
  </label>

  <select ng-model="product.sizeScale"
    name="sizeScale"
    class="form-control"
    ng-options="value for (key, value) in sizeScaleCode.sizesType"
    ></select>


  <label> Size:
  </label>

  <select ng-model="product.size"

    name="size"
    class="form-control"
    ng-options="value for (key, value) in sizeScaleCode[product.sizeScale]"
    ></select>

The $scope.sizeScaleCode is something like that:

"sizeScaleCode":{
  "sizes_type" : {
    "0" : "IT",
    "1" : "FR"  
  },
  "IT" : {
    "0" : "54",
    "1" : "57",
    "2" : "Unica"
  },
  "FR" : {
    "0" : "54",
    "1" : "57",
    "2" : "Taille Unique"
  }

}

The idea is that once selected the size scale automatically the size is updated with the correct list of value. And this code actually works during input phase. What is not working is that when the two scope variables "product.sizeScale" and "product.size" (both of them are String) are filled by some existing value and this I would like that the two selects are as consequence pre-filled with that value.

Any idea?

Upvotes: 1

Views: 124

Answers (2)

Andrew Johnston
Andrew Johnston

Reputation: 1129

This works for me. The only bug I found was that in your HTML you call the variable "sizesType" and in the javascript you call it "sizes_type". Here is a working fiddle with the correction:

$scope.sizeScaleCode = {
  sizesType : { ...

http://jsfiddle.net/63ojssrc/

Upvotes: 3

RahulB
RahulB

Reputation: 2110

sizeScaleCode is an object, not an array.You are using it as an array in ng-options of Size

ng-options="value for (key, value) in sizeScaleCode[product.sizeScale]"

You should populate it the same way you populated Size Scale i.e, with object.

Upvotes: 0

Related Questions