Question

我知道如何使用ng-repeat执行此操作。但我找不到这种方式的解决方案。

我有6个复选框，当我检查其中任何一个时，他们会显示（ng-show）6个图表中的一个。

问题是我的后端使用API以这种方式向我发送预先选中复选框的数组。

graphs_config:"["graph.batteryVoltage","graph.internetUserCount","graph.usbAndWirelessCharging"]"

我用$promise得到这个并检查是否有预检图表的数据

$scope.charts= userChartsFactory.get({ user: user_id });
   $scope.charts.$promise.then(function(data) {
   if (data.graphs_config.indexOf("graph.batteryVoltage") >= 0) {
                $scope.graphBatteryVoltage = true;
            }
            if (data.graphs_config.indexOf("graph.internetUserCount") >= 0) {
                $scope.graphInternetUserCount = true;
            }
            if (data.graphs_config.indexOf("graph.usbAndWirelessCharging") >= 0) {
                $scope.graphUsbAndWirelessCharging = true;
            }
});

在HTML中我做了这个

<div class="checkbox-inline">
    <input type="checkbox" class="checkboxShowGraph" id="graph.batteryVoltage" value="battery_voltage" checklist-model="graph.graphBatteryVoltage" ng-checked="graph.graphBatteryVoltage" ng-model="graph.batteryVoltage" ng-change="addRemoveUserChart(graph.batteryVoltage, 'graph.batteryVoltage')"><label for="graph.batteryVoltage">{{'BATTERY_VOLTAGE' | translate}}</label>
</div>
<div class="checkbox-inline">
    <input type="checkbox" class="checkboxShowGraph" id="graph.internetUserCount" value="internet_user_count" checklist-model="graph.graphInternetUserCount" ng-checked="graph.graphInternetUserCount" ng-model="graph.internetUserCount" ng-change="addRemoveUserChart(graph.internetUserCount, 'graph.internetUserCount')"><label for="graph.internetUserCount">{{'INTERNET_USER_COUNT' | translate}}</label>
</div>
<div class="checkbox-inline">
    <input type="checkbox" class="checkboxShowGraph" id="graph.usbAndWirelessCharging" value="usb_and_wireless_charging" checklist-model="graph.usbAndWirelessCharging" ng-model="graph.usbAndWirelessCharging" ng-change="addRemoveUserChart(graph.usbAndWirelessCharging, 'graph.usbAndWirelessCharging')"><label for="graph.usbAndWirelessCharging">{{'CHARGING_COUNTER' | translate}}</label>
</div>

我检查值是true还是false并且使用ng-checked我尝试在HTML中检查复选框但这不起作用，因为复选框没有以这种方式预先检查。

Answer 1

您可以参考此工作代码。

此处控制器代码

$scope.data={
    FirstCheckbox:true,
    SecondCheckbox: false
    }

这是HTML

  <label class="">
                <li class="item item-checkbox checkbox-dark " >
                    Test1
                       <label class="checkbox" >
                       <input type="checkbox" ng-model="data.FirstCheckbox" >
                       </label>
                    </li>
            </label>
    <label class="">
                <li class="item item-checkbox checkbox-dark " >
                    Test2
                       <label class="checkbox" >
                       <input type="checkbox" ng-model="data.SecondCheckbox" >
                       </label>
                    </li>
            </label>

动态检查ng-show的复选框

1 个答案: