Question

我试图使用json创建一个从属下拉列表框。例如：如果选择的汽车品牌是“bmw”，那么汽车模型下拉列表必须只显示列表中的“suv”，其他两个选项不应该不显示。对于“梅赛德斯”，它应该只显示汽车模型中的“suv”和“coupe”。还请解释一下json的用途是什么？以及它如何影响代码。

my.html

   Car Brand:
        <select name="carname" ng-model="userSelect" required>
            <option value="">--Select--</option>
             <span ng-show="valdate.carname.$error.required">Car name</span>
            <option ng-repeat="ManufactureBrand in a" ng-bind="ManufactureBrand" >
                {{ManufactureBrand}}
            </option>
        </select>
        <br/>
        <br/> Car Model:
        <select name="carmodel" ng-model="selectCar" required>
              <option value="">--Select--</option>
              <span ng-show="valdate.carmodel.$error.required">Car name</span>
              <option ng-repeat="CarName in b" ng-bind="CarName">
                {{CarName}}
            </option>
        </select>
        <br/>
            <input type="submit" ng-click="checkselection()" ng-disabled="valdate.carname.$invalid && valdate.carmodel.$invalid">

的script.js

       app.factory('Brandtest', function () {
        var brand = {};
        brand.sample = ['Bmw', 'Mercedes', 'Honda'];
        brand.car = ['Suv', 'Sedan', 'Cope'];

        {
            return brand;
        }
    });

app.controller('selectDropdown', ['$scope', 'Brandtest', function ($scope, Brandtest) {
    $scope.a = Brandtest.sample;
    $scope.b = Brandtest.car;

    $scope.list=[];
    $scope.carlist=[];


    $scope.checkselection = function () {

        if ($scope.userSelect != "" && $scope.userSelect != undefined &&
            $scope.selectCar != "" && $scope.selectCar != undefined )
           {

           $scope.list.push($scope.userSelect);
           $scope.carlist.push($scope.selectCar);

        }

提前致谢。

Answer 1

你必须在2个下拉列表之间保持一些共同关系。最好是拥有一个json对象，并使用ng-options根据第一个下拉列表中选择的值填充第二个下拉列表。运行下面的演示程序，你就明白了。

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>Select a car:</h1>
<select ng-model="x" ng-options="x for (x, y) in cars"></select>
<h1 ng-if="x">Category: </h1>
<select ng-if="x" ng-model="y" ng-options="y for y in x"></select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.cars = {
    "car01" : ["Ford", "BMW", "NISSAN"],
    "car02" : ["Fiat", "Infinity"],
    "car03" : ["Volvo", "Toyota"]
}
});
</script>
</body>
</html>

Answer 2

这是工作plunkr

您必须修改以下代码

你的工厂应该是这样的

app.factory('Brandtest', function () {
    var brand = {};
    brand.sample =[
        {
            "id": 0,
            "carName": "BMW"
        },
        {
            "id": 1,
            "carName": "Mercedes"
        },
        {
            "id": 2,
            "carName": "Honda"
        }
    ];
    brand.car =[
        {
            "id": 0,
            "carType": "Suv",
            "parentId": 0
        },

        {
            "id": 1,
            "carType": "Sedan",
            "parentId": 1
        },
        {
            "id": 2,
            "carType": "Cope",
            "parentId": 2
        }
    ];

    {
        return brand;
    }

});

在您的HTML中修改如下代码

<body ng-controller="selectDropdown">
 Car Brand:
        <select name="carname" ng-model="userSelect" ng-options="p.carName for p in a" required>
            <option value="">--Select--</option>
             <span ng-show="valdate.carname.$error.required">Car name</span>
        </select>
        <br/>
        <br/> Car Model:
        <select name="carmodel" ng-model="selectCar" ng-options="c.carType for c in b | filter:{parentId: userSelect.id}" required>
              <option value="">--Select--</option>
              <span ng-show="valdate.carmodel.$error.required">Car name</span>
        </select>
        <br/>
            <input type="submit" ng-click="checkselection()" ng-disabled="valdate.carname.$invalid && valdate.carmodel.$invalid">
      <table>
            <tr>
                <th>Car Name</th>
                  <th>Car Model</th></tr>
                  <tr ng-repeat="carz in list track by $index">
                  <td>{{carz.carName}}</td>
                <td>{{carlist[$index].carType}}</td>
                </tr>
     </table>
  </body>

如何使用json使下拉列表依赖？

2 个答案: