从下拉框中选定的项目，并以表格格式显示

嗨我试图列出从下拉框中选择的项目，并使用angularjs.so在表中显示它。这里是代码，从下拉框中选定的项目，并以表格格式显示

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

     }

我还附加了图片，显示了我的最终结果。

此处列表中所有列表中的项目在同一行中重叠。因此，请帮助我正确显示表格，并从下拉菜单中提交选定的项目，我希望它们能够一个在另一个下面。

来源

2016-09-16 Rudhra

对不起图像文件didnt正常上传。 – Rudhra

可以使你的代码plunkr链接将很容易为所有人解决您的问题 –

URL添加@MBalajivaishnav – Rudhra

请检查该工作plunkr

以下是代码修改

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

来源

2016-09-16 10:17:42

从下拉框中选定的项目，并以表格格式显示

回答

相关问题