Question

正如标题所说，我试图渲染一组复选框元素，这些复选框元素是从一个JSON中创建的，它是从一个php文件中反映出来的。我无法弄清楚如何到达最深的嵌套对象。

我能够使用顶级产品渲染一个选择框，但是当顶级产品包含产品选项时，我无法渲染它。

这是我的PHP文件，它呈现JSON数据：

<?php

$electrical = [

   "products"  =>
    [
        [
            "name"  => "LED Spotlight Kit",
            "id"    => 1,
            "product_options"  =>
            [
                [
                    "name"      => "Dual 60W Lights",
                    "id"        => 10,
                    "active"    => true
                ],[
                    "name"      => "120W Light Bar",
                    "id"        => 11,
                    "active"    => true
                ]
            ]
        ],
        [
            "name"  => "Bilge Pump",
            "id"    => 2,
            "product_options"  =>
            [
                [
                    "name"      => "1100GPH Manual",
                    "id"        => 12,
                    "active"    => true
                ],[
                    "name"      => "1100GPH Automatic",
                    "id"        => 13,
                    "active"    => true
                ]
            ]
        ],
        [
            "name"  => "12v Plug",
            "id"    => 3,
            "product_options"  =>
            [
                [
                    "name"      => "Rear",
                    "id"        => 14,
                    "active"    => true
                ],[
                    "name"      => "Mid Ship",
                    "id"        => 15,
                    "active"    => true
                ]
            ]
        ],
        [
            "name"  => "Rocker Panel Switches (Includes 12v plug)",
            "id"    => 4
        ],
        [
            "name"  => "LED Side Navigation Lights (Front red and green bow light upgrade)",
            "id"    => 5
        ],
        [
            "name"  => "Cranking Battery",
            "id"    => 6
        ],
        [
            "name"  => "Deep Cycle Trolling Battery",
            "id"    => 7
        ],
        [
            "name"  => "On Board Charger",
            "id"    => 8,
            "product_options"  =>
            [
                [
                    "name"      => "1 Bank",
                    "id"        => 16,
                    "active"    => true
                ],[
                    "name"      => "2 Banks",
                    "id"        => 17,
                    "active"    => true
                ],[
                    "name"      => "3 Banks",
                    "id"        => 18,
                    "active"    => true
                ],[
                    "name"      => "4 Banks",
                    "id"        => 19,
                    "active"    => true
                ]
            ]
        ],
        [
            "name"  => "Trolling Motor Plug and Wiring (Must have to operate trolling motor)",
            "id"    => 9
        ],
        [
            "name"  => "Extreme Navigation Light (Rear stern light upgrade)",
            "id"    => 10
        ]
    ]
];

echo json_encode($electrical);

这是我的Angular Controller和Route：

'use strict';

angular.module('wizard.electrical', ['ui.router'])

.config(['$stateProvider', function($stateProvider)
{
    $stateProvider.state("electrical",
    {
        url: "/electrical",
        controller: 'ElectricalCtrl',
        views:
            {
                'electrical@':
                {
                    templateUrl: 'modules/electrical/electrical.html'
                }
            }
    });
}])

.controller('ElectricalCtrl', ['$rootScope', '$scope', '$http', function($rootScope, $scope, $http)
{
    $scope.electrical   = [];

    $http.get(Config.defaultPath + 'mock/getElectricalData.php')
    .success(function(data, status, headers)
    {
        $scope.electrical = data;
        console.log($scope.electrical);
    })
    .error(function(data, status, headers, config)
    {
        console.log("Error loading electrical options")
    });

    $scope.LoadSubElectricOptions = function()
    {
        //TODO
    };
}]);

最后，这里的html将正确呈现选择框，但不是复选框

<div class="container" ng-controller="ElectricalCtrl">
    <div class="formContent left">

    <select name="selectElec" ng-model="electricalData.products"
            ng-options="item as item.name for item in electrical.products">
    </select>

    <div id="tabs" class="tabs">
        <tabset>
            <tab ng-repeat="tab in electricData.products.product_options" heading="{{tab.name}}" ng-model="electricData.products.selected" active="tab.active" disable="tab.disabled">
                <div class="non-scrollable-container">
                    <div class="group-box" ng-repeat="product in filteredElectric = (tab.product | filter: {active: true})">
                        <div class="left">
                            <input type="checkbox" ng-model="electricData.products.selected.model" name="electric" ng-value="electric">{{electric.name}}
                        </div>
                    </div>
                </div>
            </tab>
        </tabset>
    </div>


    </div>
    <div class="submitBtn">
        <button ng-click="section.SaveAndNext(electrical, $event)">Next</button>
    </div>

</div>

Answer 1

您应该在＆lt; ng-repeat指令中使用$ scope对象 electricalData 而不是 electricData 。标签＆gt;元素，因为你绑定到 al 数据＆lt;选择＆gt;元件。

从嵌套的json对象AngularJS

1 个答案: