AngularJS default dropdown select not working

Question

var jsonData ='[
     {"type":"product",
      "id":1,"label":"Color",
      "placeholder":"Select Jean Color",
      "description":"",
      "defaultValue":"Brown",
      "choices":[{
         "text":"Denim",
         "price":"$0.00",
         "isSelected":"false"
      },
      {
        "text":"Black",
        "price":"$0.00",
        "isSelected":"true"
      },
      {
        "text":"Brown",
        "price":"$0.00",
        "isSelected":"false"
      }],
      "conditionalLogic":
         {
           "actionType":"show",
           "logicType":"all",
           "checkbox":true,
           "rules":[{
             "fieldId":2,
             "operator":"or",
             "value":"Regular"
            },
            {
              "fieldId":3,
              "operator":"or",
              "value":"Low"
            }]
         }},
         {
           "type":"product","id":2,"label":"Color","placeholder":"Select Color","description":"Color Descrioton","defaultValue":"Red","choices":[{"text":"Red","price":"200","isSelected":"true"}],"conditionalLogic":""},{"type":"product","id":3,"label":"Select Fit","placeholder":"Select Jean Fit","description":"","defaultValue":"Fit","choices":[{"text":"Regular","price":"$0.00","isSelected":"false"},{"text":"Skinny","price":"$10.00","isSelected":"false"},{"text":"Fit","price":"$5.00","isSelected":"false"}],"conditionalLogic":{"actionType":"show","logicType":"all","checkbox":true}},{"type":"product","id":4,"label":"Select Rise","placeholder":"Select Rise","description":"","defaultValue":"Low","choices":[{"text":"High","price":"$29.00","isSelected":"false"},{"text":"Low","price":"$0.00","isSelected":"true"}],"conditionalLogic":""},{"type":"product","id":5,"label":"Size","placeholder":"Select Size","description":"","defaultValue":"Size 36","choices":[{"text":"Size 30","price":"100.00","isSelected":"false"},{"text":"Size 32","price":"100.00","isSelected":"true"},{"text":"Size 34","price":"100.00","isSelected":"true"},{"text":"Size 36","price":"100.00","isSelected":"false"}],"conditionalLogic":""}]';

$scope.attributes = jsonData;

HTML

<div class="col-sm-6" ng-repeat="product_attribute in attributes">
  <div class=" form-group">
     <label class="font-noraml">{{product_attribute.label}}</label>
     <select class="form-control m-b" name="option_choices" ng-selected="option.isSelected=='true'" ng-model="option.price" ng-options="option.price as option.text for option in product_attribute.choices">
         <option value="">{{product_attribute.placeholder}}</option>
     </select>
  </div>
</div>

Above I have posted my JSON and HTML code. I want to show all the attributes choices in my dropdown with default selected value. Please check my HTML I have tried ng-selected="option.isSelected=='true'" to default select my choices options. But that is not working.

Screenshot:

ng-selected would have to be applied to the option element, not the select, so it is not compatible with ng-options. — Heretic Monkey
– Heretic Monkey, Commented Sep 22, 2016 at 15:31

Mihai Alexandru-Ionut · Accepted Answer · 2016-09-22 16:32:40Z

1

You must have defaultValue as object that comprising all properties.Here is your solution -> jsfiddle

For example:

"defaultValue": {
        "text": "Black",
        "price": "$0.00",
        "isSelected": "true"
    }

answered Sep 22, 2016 at 16:32

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS default dropdown select not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related