我正在尝试使用Angular JS从json数据创建级联下拉

时间:2016-12-28 16:04:29

标签: html angularjs

我正在尝试使用Angular JS从json数据创建级联下拉,但无法根据您在第一次淹没时选择的项目在第二个下拉列表中填充数据。 任何人都可以告诉我我在哪里做错了

HTML:

<select ng-model="asset 1" id="assetNameGroup"  ng-change="populateSection(this)"      ng-options=" x.name for x in Nameitems">
      <option  value="">Select Name</option>
   </select>
   <select ng-model="asset2" id="assetNameGroup2" ng-     change="populateSection2()" ng-options=" x.name for x in asset1.sections">
  <option  value="">Select Name</option>
 </select>

JS

    // Code goes here 
       var app = angular.module("myApp" ,[]);
     app.controller('sensorsCtrl', function($scope, $state, $http) 
         alert("");

    $http.get(sample.json).success(function (resp) {
        $scope.innerIsIsLoading = false;
        $scope.assetData = resp;


          $scope.Nameitems = [];

           var testobj = $scope.assetData[0].name;
         angular.forEach($scope.assetData, function(val,key) {
         $scope.Nameitems.push ({"name": 
          val.name,"uri":val.uri,"sections":  val.sections});
              console.log("console.log(JSON.stringify-----=                                                                                                               "+JSON.stringify
                ($scope.Nameitems));
           });
          console.log("$scope.assetData"+JSON.stringify($scope.assetData));

        $timeout(function() {

          //$scope.SequenceLinkTableData=$scope.assetData;
        }, 100);
        });


       $scope.populateSection=function(value)
         {
           var checkvalue = value;
              console.log(value);

     var Namesite =                              document.getElementById('assetNameGroup').value.split("/")[2];
        alert(Namesite);
            }

                });


              Json:

                    [{
             "uri": "/assets/0ff042ea-45e6-32e1-915b-81efa58e924e",
        "name": "Asset 1",
           "sections": [{
               "uri": "/assets/67dc7db3-2374-314d-8b19-6be09d4203c9",
              "sectionId": null,
    "name": "Section 1",
    "ultrasonicSensors": null,
    "temperatureSensors": null,
    "ultrasonicSensorPositions": [{
        "ultrasonicSensorPositionId": 1392,
        "sensorPositionName": "MeasurementPosition 1",
        "diameter": 12,
        "rotation": 270,
        "sequenceNumber": null,
        "sectionId": "/assets/67dc7db3-2374-314d-8b19-6be09d4203c9"
    }, {
        "ultrasonicSensorPositionId": 1428,
        "sensorPositionName": "MeasurementPosition 2",
        "diameter": 12,
        "rotation": 270,
        "sequenceNumber": null,
        "sectionId": "/assets/67dc7db3-2374-314d-8b19-6be09d4203c9"
    }]
}, {
    "uri": "/assets/8d2c61f7-eb3e-3170-9e0b-dc26b2b574f5",
    "sectionId": null,
    "name": "Section 1",
    "ultrasonicSensors": null,
    "temperatureSensors": null,
    "ultrasonicSensorPositions": [{
        "ultrasonicSensorPositionId": 1390,
        "sensorPositionName": "ultrasonic sensor position 1",
        "diameter": 22.5,
        "rotation": 90,
        "sequenceNumber": null,
        "sectionId": "/assets/8d2c61f7-eb3e-3170-9e0b-dc26b2b574f5"
    }, {
        "ultrasonicSensorPositionId": 1427,
        "sensorPositionName": "MeasurementPosition 2",
        "diameter": 12,
        "rotation": 270,
        "sequenceNumber": null,
        "sectionId": "/assets/8d2c61f7-eb3e-3170-9e0b-dc26b2b574f5"
    }, {
        "ultrasonicSensorPositionId": 1445,
        "sensorPositionName": "MeasurementPosition 3",
        "diameter": 12,
        "rotation": 270,
        "sequenceNumber": null,
        "sectionId": "/assets/8d2c61f7-eb3e-3170-9e0b-dc26b2b574f5"
    }]
}]

         }]

plunker link

1 个答案:

答案 0 :(得分:0)

在第二个ng-options中,从asset1.sections更改为asset1

ng-options="x.name for x in asset1"

演示: https://plnkr.co/edit/r3zrGrAT4PweKw1aLpe6?p=preview