Question

我想问...... 如何使用angularjs databind

将数据回调到多个选择选项中

这是我的javascript

<script type="text/javascript">
        var app = angular.module("otobuus_app" , []);
            app.controller("index_controller", function($scope, $http){
                $scope.fetch = function(){
                    $scope._result_kota_asal = null;

                    angular.forEach(_result_kota_asal, (val, index) =>{
                            var _options = "";
                            angular.forEach(val.wilayahs, (val2) => {
                                _options += '<option value=" '+ val2.idWilayah +' ">' + val2.namaWilayah + '</option>';
                            });
                            var _opt_group = '<optgroup label=" '+ val.namaProvinsi +'" >' + _options + '</optgroup>';
                        $('#kotaAsal').append(_opt_group);
                    });

                    $http.get('http://dev.otodata.co.id:8181/mobile/kota/xxxxxxx')
                    .then (function successCallback (data) {
                        $scope._result_kota_asal = data;
                        console.log(data);
                    });
                };
</script>

这是HTML

                                   <div class="col-md-10">
                                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label col-xs-5">
                                            <input type="text" class="mdl-textfield__input" id="asal1" ng-click="fetch()">
                                            <label class="mdl-textfield__label" for=""><p style="color: white;">Kota Asal</p></label>
                                        </div>

                                        <div id="asal2" class="col-xs-5 asal">
                                            <select class="kotaAsal" id="kotaAsal"  style="width: 200px;">
                                                <optgroup ng-repeat="list_kota in _result_kota_asal" label="@{{list_kota.namaProvinsi}}">
                                                    <option ng-repeat="wilayah in list_kota.wilayahs" value="@{{wilayah.idWilayah}}">
                                                        @{{wilayah.namaWilayah}}
                                                    </option>
                                                </optgroup>
                                            </select>
                                        </div>
                                    </div>

这是来自url的数据json：'http://dev.otodata.co.id:8181/mobile/kota/xxxxxxx'

[
{
    "idProvinsi": 1,
    "namaProvinsi": "DKI Jakarta",
    "wilayahs": [
        {
            "idWilayah": 1,
            "namaWilayah": "Jakarta"
        }
    ]
},
{
    "idProvinsi": 2,
    "namaProvinsi": "Jawa Barat",
    "wilayahs": [
        {
            "idWilayah": 38,
            "namaWilayah": "Bandung"
        },
        {
            "idWilayah": 22,
            "namaWilayah": "Bekasi"
        },
        {
            "idWilayah": 2,
            "namaWilayah": "Bogor"
        },
        {
            "idWilayah": 17,
            "namaWilayah": "Depok"
        },
        {
            "idWilayah": 3,
            "namaWilayah": "Karawang"
        },
        {
            "idWilayah": 6,
            "namaWilayah": "Kuningan"
        },
        {
            "idWilayah": 26,
            "namaWilayah": "Purwakarta"
        }
    ]
},
{
    "idProvinsi": 3,
    "namaProvinsi": "Jawa Tengah",
    "wilayahs": [
        {
            "idWilayah": 32,
            "namaWilayah": "Batang"
        },
        {
            "idWilayah": 73,
            "namaWilayah": "Boyolali"
        },
        {
            "idWilayah": 29,
            "namaWilayah": "Demak"
        },
        {
            "idWilayah": 31,
            "namaWilayah": "Kendal"
        },
        {
            "idWilayah": 37,
            "namaWilayah": "Kudus"
        },
        {
            "idWilayah": 19,
            "namaWilayah": "Magelang"
        },
        {
            "idWilayah": 36,
            "namaWilayah": "Pati"
        },
        {
            "idWilayah": 35,
            "namaWilayah": "Rembang"
        },
        {
            "idWilayah": 74,
            "namaWilayah": "Salatiga"
        },
        {
            "idWilayah": 30,
            "namaWilayah": "Semarang"
        },
        {
            "idWilayah": 71,
            "namaWilayah": "Solo"
        },
        {
            "idWilayah": 72,
            "namaWilayah": "Sukoharjo"
        },
        {
            "idWilayah": 23,
            "namaWilayah": "Wonogiri"
        }
    ]
},
{
    "idProvinsi": 4,
    "namaProvinsi": "Jawa Timur",
    "wilayahs": [
        {
            "idWilayah": 49,
            "namaWilayah": "Jepara"
        },
        {
            "idWilayah": 75,
            "namaWilayah": "Pacitan"
        },
        {
            "idWilayah": 40,
            "namaWilayah": "Tuban"
        }
    ]
},
{
    "idProvinsi": 5,
    "namaProvinsi": "Banten",
    "wilayahs": [
        {
            "idWilayah": 39,
            "namaWilayah": "Banten"
        },
        {
            "idWilayah": 65,
            "namaWilayah": "Tangerang"
        }
    ]
},
{
    "idProvinsi": 13,
    "namaProvinsi": "Sumatera Selatan",
    "wilayahs": [
        {
            "idWilayah": 69,
            "namaWilayah": "Palembang"
        }
    ]
},
{
    "idProvinsi": 16,
    "namaProvinsi": "Daerah Istimewa Yogyakarta",
    "wilayahs": [
        {
            "idWilayah": 18,
            "namaWilayah": "Wonosari"
        },
        {
            "idWilayah": 76,
            "namaWilayah": "Yogyakarta"
        }
    ]
}

已输入来自网址的数据，我在控制台中进行了检查，但尚未显示在选项中。请帮帮我，谢谢

Answer 1

这就是我做的，它的工作原理。我为测试目的创建了一个虚拟json文件。

    <!DOCTYPE html>
    <html ng-app="otobuus_app">

    <head>
      <meta charset="utf-8" />
      <title>AngularJS</title>
      <link data-require="bootstrap-css@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" />
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
      <script>
        document.write('<base href="' + document.location + '" />');
      </script>
      <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
      <script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"  ></script>
    </head>

    <body ng-controller="index_controller">
                                       <div class="col-md-10">
                                            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label col-xs-5">
                                                <input type="text" class="mdl-textfield__input" id="asal1">
                                                <label class="mdl-textfield__label">Kota Asal</label>
                                            </div>

                                            <div id="asal2" class="col-xs-5 asal">
                                                <select class="kotaAsal" id="kotaAsal"  style="width: 200px;">
                                                    <optgroup ng-repeat="list_kota in _result_kota_asal" label="@{{list_kota.namaProvinsi}}">
                                                        <option ng-repeat="wilayah in list_kota.wilayahs" value="@{{wilayah.idWilayah}}">
                                                            @{{wilayah.namaWilayah}}
                                                        </option>
                                                    </optgroup>
                                                </select>
                                            </div>
                                        </div>



        <script>

                var app = angular.module("otobuus_app" , []);
                app.controller("index_controller", function($scope, $http){
                //    $scope.fetch = function(){
                        $scope._result_kota_asal = null;



                        angular.forEach($scope._result_kota_asal, (val, index) =>{
                                var _options = "";
                                angular.forEach(val.wilayahs, (val2) => {
                                    _options += '<option value=" '+ val2.idWilayah +' ">' + val2.namaWilayah + '</option>';
                                });
                                var _opt_group = '<optgroup label=" '+ val.namaProvinsi +'" >' + _options + '</optgroup>';
                            $('#kotaAsal').append(_opt_group);
                        });

    //                    $http.get('http://dev.otodata.co.id:8181/mobile/kota/xxxxxxx')
    //                    .then (function successCallback (data) {
    //                        $scope._result_kota_asal = data;
    //                        console.log(data);
    //                    });


                $http.get('ang-select.json').success(function(data) { 
                    console.log("success!");
                    $scope._result_kota_asal = data;
                        console.log(data);
                });  

                 //   };

        });
        </script>

    </body>

    </html>

和json文件：

    [
    {
        "idProvinsi": 1,
        "namaProvinsi": "DKI Jakarta",
        "wilayahs": [
            {
                "idWilayah": 1,
                "namaWilayah": "Jakarta"
            }
        ]
    },
    {
        "idProvinsi": 2,
        "namaProvinsi": "Jawa Barat",
        "wilayahs": [
            {
                "idWilayah": 38,
                "namaWilayah": "Bandung"
            },
            {
                "idWilayah": 22,
                "namaWilayah": "Bekasi"
            },
            {
                "idWilayah": 2,
                "namaWilayah": "Bogor"
            },
            {
                "idWilayah": 17,
                "namaWilayah": "Depok"
            },
            {
                "idWilayah": 3,
                "namaWilayah": "Karawang"
            },
            {
                "idWilayah": 6,
                "namaWilayah": "Kuningan"
            },
            {
                "idWilayah": 26,
                "namaWilayah": "Purwakarta"
            }
        ]
    },
    {
        "idProvinsi": 3,
        "namaProvinsi": "Jawa Tengah",
        "wilayahs": [
            {
                "idWilayah": 32,
                "namaWilayah": "Batang"
            },
            {
                "idWilayah": 73,
                "namaWilayah": "Boyolali"
            },
            {
                "idWilayah": 29,
                "namaWilayah": "Demak"
            },
            {
                "idWilayah": 31,
                "namaWilayah": "Kendal"
            },
            {
                "idWilayah": 37,
                "namaWilayah": "Kudus"
            },
            {
                "idWilayah": 19,
                "namaWilayah": "Magelang"
            },
            {
                "idWilayah": 36,
                "namaWilayah": "Pati"
            },
            {
                "idWilayah": 35,
                "namaWilayah": "Rembang"
            },
            {
                "idWilayah": 74,
                "namaWilayah": "Salatiga"
            },
            {
                "idWilayah": 30,
                "namaWilayah": "Semarang"
            },
            {
                "idWilayah": 71,
                "namaWilayah": "Solo"
            },
            {
                "idWilayah": 72,
                "namaWilayah": "Sukoharjo"
            },
            {
                "idWilayah": 23,
                "namaWilayah": "Wonogiri"
            }
        ]
    },
    {
        "idProvinsi": 4,
        "namaProvinsi": "Jawa Timur",
        "wilayahs": [
            {
                "idWilayah": 49,
                "namaWilayah": "Jepara"
            },
            {
                "idWilayah": 75,
                "namaWilayah": "Pacitan"
            },
            {
                "idWilayah": 40,
                "namaWilayah": "Tuban"
            }
        ]
    },
    {
        "idProvinsi": 5,
        "namaProvinsi": "Banten",
        "wilayahs": [
            {
                "idWilayah": 39,
                "namaWilayah": "Banten"
            },
            {
                "idWilayah": 65,
                "namaWilayah": "Tangerang"
            }
        ]
    },
    {
        "idProvinsi": 13,
        "namaProvinsi": "Sumatera Selatan",
        "wilayahs": [
            {
                "idWilayah": 69,
                "namaWilayah": "Palembang"
            }
        ]
    },
    {
        "idProvinsi": 16,
        "namaProvinsi": "Daerah Istimewa Yogyakarta",
        "wilayahs": [
            {
                "idWilayah": 18,
                "namaWilayah": "Wonosari"
            },
            {
                "idWilayah": 76,
                "namaWilayah": "Yogyakarta"
            }
        ]
    }
    ]

如何使用angularjs数据绑定将回调数据url转换为多个选择选项

1 个答案: