CODEWITHSUNDEEP
angularjs
Rudhra
Rudhra

Reputation: 123

Diplaying the selected item from the drop down box and display them in a table format

Hi Im trying to list the items selected from the drop-down box and display it in a table using angularjs.So here is the 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);

        }

I have also attached image, how my final result is displayed.

here all the items in list once submitted are overlapping in the same row. So, please help me to properly display the table and also on submitting the selected item from drop down I want them to be one below the other.

Upvotes: 0

Views: 159

Answers (1)

balajivaishnav
balajivaishnav

Reputation: 2893

please check this working plunkr

The following are the code modified 

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

Upvotes: 1

Related Questions