Question

您好我正在尝试列出从下拉框中选择的项目并使用angularjs将其显示在表格中。这里是代码，

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

以下是修改后的代码

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

从下拉框中拖放所选项目并以表格格式显示它们

1 个答案: