jsonを使用してドロップダウンリストを作成する方法は？

jsonを使用して従属ドロップダウンリストボックスを作成しようとしています。たとえば、選択した車のブランドが「bmw」の場合、車のモデルのドロップダウンにリストから「suv」のみが表示され、「メルセデス」と同様に、車種には「SUV」と「クーペ」のみが表示されます。また、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とは何ですか？フォームタグの場合はどこですか？ –

はあなたの工場は、あなたのHTMLコードを変更して、この

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; 
    } 

});

ようにする必要があり

以下のように変更しますコードを持って取り組んでplunkr

です以下のように

<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オブジェクトを使用し、最初のドロップダウンで選択した値に基づいて2番目のドロップダウンを設定するために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

あなたは何を工場のサービスを追加したいですか？ –

私の大学では、従属ドロップダウンボックスでfactoryとjsonを使うことが義務付けられていました。だから知りたいのはそれが可能なのです。 @Vishal Gulati – Rudhra

jsonを使用してドロップダウンリストを作成する方法は？

答えて

関連する問題