2016-09-22 2 views
2
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; 

HTMLAngularJS Standard-Drop-Down-Auswahl nicht funktioniert

<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 ich meine JSON und HTML-Code geschrieben haben. Ich möchte alle attributes Auswahlmöglichkeiten in meinem Dropdown mit dem voreingestellten Wert anzeigen. Bitte überprüfen Sie meine HTML Ich habe versucht, ng-selected="option.isSelected=='true'" standardmäßig wählen Sie meine Optionen Optionen. Aber das funktioniert nicht.

Screenshot:

enter image description here

+1

[ 'ng "ausgewählt"] (https://docs.angularjs.org/api/ng/directive/ngSelected) müsste auf t angewendet werden er 'option' Element, nicht das' select', also ist es nicht kompatibel mit 'ng-options'. –

Antwort

1

Sie müssen defaultValue als Objekt, das alle properties.Here umfasst, ist Ihre Lösung -> jsfiddle

Zum Beispiel:

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