Rudhra Rudhra - 2 months ago 7
AngularJS Question

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.

Answer

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>