ドロップダウンボックスから選択したアイテムを表示し、テーブル形式で表示する

Question

こんにちは、ドロップダウンボックスから選択したアイテムを一覧表示し、それを角度ジェスチャを使用してテーブルに表示しようとしています。コードは

https://plnkr.co/edit/8qCgB2flMGB89moppkz6?p=preview

abc.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"> 
     <table> 
      <tr> 
       <th>Car Name</th> 
        <th>Car Model</th></tr> 
        <tr> 
        <td>{{list}}</td> 
       <td>{{carlist}}</td> 
       </tr> 
    </table> 

abc.js

var app = angular.module('carService', []); 

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

この作業plunkr

次のことを確認してくださいコードは、申し訳ありませんが、画像ファイルが正常にアップロードdidntの

<table> 
     <tr> 
      <th>Car Name</th> 
       <th>Car Model</th></tr> 
       <tr ng-repeat="carz in list track by $index"> 
       <td>{{carz}}</td> 
      <td>{{carlist[$index]}}</td> 
      </tr> 
</table>