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

我试图用json创建一个依赖的下拉列表框。例如：如果选择的汽车品牌是“bmw”，那么汽车模型下拉菜单必须仅显示列表中的“suv”，而其他两个选项不应该“不会显示。与“梅赛德斯”相同，它应该在车型中仅显示“suv”和“coupe”。还请解释json的用途是什么？还有它如何影响代码。如何使下拉列表依赖使用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); 

     }

在此先感谢。

来源

2016-09-19 Rudhra

当使用依赖关系渲染下拉列表时，您遵循的模式是什么。 –

第一个下降的汽车品牌应该显示汽车品牌名称。在选择特定的汽车品牌时，应在下一个下拉列表中仅显示与该汽车品牌相关的汽车名称。 @StarkButtowski – Rudhra

什么是valdate和Where表单标签在哪里？ –

这里是工作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>

来源

2016-09-19 09:24:39

你必须在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>

来源

2016-09-19 07:17:02

是否也可以添加工厂服务或者不能使用工厂服务？ @Vishal Gulati – Rudhra

为什么你想添加工厂服务？ –

这是我大学给出的在独立下拉框中使用工厂和json的分配。所以只是想知道是否有可能。 @Vishal Gulati – Rudhra

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

回答

相关问题