Das ausgewählte Element aus der Dropdown-Box anzeigen und in einem Tabellenformat anzeigen

Question

Hi Ich versuche, die in der Dropdown-Liste ausgewählten Elemente aufzulisten und sie in einer Tabelle mit angularjs.So anzuzeigen, hier ist der Code

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

     } 

Ich habe auch ein Bild angehängt, wie mein Endergebnis angezeigt wird.

Hier überlappen sich alle einmal eingereichten Elemente in der gleichen Zeile. Also, bitte helfen Sie mir, die Tabelle richtig anzuzeigen und auch beim Einreichen des ausgewählten Artikels aus Dropdown ich möchte, dass sie untereinander stehen.

Answer 1

überprüfen Sie bitte diese Arbeits plunkr

Im Folgenden sind der Code

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