顯示來自Angularjs中JSON輸入的選定單選按鈕

Question

我希望根據輸入的json值選擇單選按鈕。

我的json是

       "inventoryType": {
                        "bulk": [
                            {
                                "totalUnits": 80,
                                "addedOn": "12-01-2013"
                            }
                        ]
                    }

要么

        "inventoryType": {
                        "day": [
                            {
                                "from": "12-Jan-2013",
                                "to": "12-Jan-2014",
                                "unitsPerDay": "30"
                            },
                            {
                                "from": "13-Jan-2014",
                                "to": "12-Jan-2015",
                                "unitsPerDay": "20"
                            }
                        ]
                    },

這是庫存類型的兩個不同數據“批量”和“天”。

如果獲取批量數據，則希望選擇批量單選按鈕，反之亦然。

HTML代碼

<label class="span1">                                     
<input type="radio" name="optionsRadios" id="optionsRadios1" ng-value="{{productServiceInventory}}" ng-model="bulk" >
<small>Bulk</small>
</label>
<label class="span1">
<input type="radio" name="optionsRadios" id="optionsRadios2" ng-value="{{productServiceInventory}}" ng-model="day" >
<small>Day</small>
</label>

這里{{productServiceInventory}}的值在控制器中傳遞

if($scope.productServiceData.inventoryType.day === undefined){
console.log("bulk");
$scope.productServiceInventory = "bulk";
}
else if($scope.productServiceData.inventoryType.bulk === undefined){
console.log("day");
$scope.productServiceInventory = "day";
}

但我的單選按鈕未選擇適當的數據。

請幫助我選擇json fetch上的單選按鈕。

提前致謝..

Answer 1

在HTML中，當您使用ng-model="bulk" ，您指的是整個數組，而$scope.productServiceInventory = "bulk"則是一個字符串。 如果兩個值相等，將選擇單選按鈕。

<label class="span1">                                     
<input type="radio" name="optionsRadios" id="optionsRadios1" ng-model="productServiceInventory" value="bulk" >
<small>Bulk</small>
</label>
<label class="span1">
<input type="radio" name="optionsRadios" id="optionsRadios2" ng-model="productServiceInventory" value="day" >
<small>Day</small>
</label>

還有其他方法可以實現相同的目的，但是通過這種方式，您可以按原樣使用控制器。