2016-09-22 90 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默認的下拉列表中選擇不工作

<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> 

上面我已經發布我的JSON和HTML代碼。我想在默認選擇值下拉列表中顯示所有attributes選項。請檢查我的HTML我已嘗試ng-selected="option.isSelected=='true'"默認選擇我的選擇選項。但那不起作用。

截圖:

enter image description here

+1

['納克選中的](https://docs.angularjs.org/api/ng/directive/ngSelected)將不得不應用於t他'option'元素,而不是'select',所以它與'ng-options'不兼容。 –

回答

1

必須具有defaultValue作爲對象,該對象包括所有properties.Here是您的解決方案 - > jsfiddle

例如:

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