Display dropdown on table data cell in html using angularjs

Question

I am trying to populate rows in my html table based on my angularjs response. My aim is to make one of my table data cell in a drop down format.

Requirements:

The drop down will have three values (A, B and C).
The initial value should be the value obtained in my angularjs response.
The other values of the dropdown should be the remaining values that is not obtained in the response.

In detail:

I have this table row:

<tbody>
   <tr valign="middle" st-select-row="row" st-select-mode="multiple" ng-repeat="row in display_republish_records" id="{{row.botMainId}}">
      <td><select class="custom-select" style="margin-left:0px" ng-model="botId" ng-options="choice.name for choice in botIds"></select></td>
      <td ng-bind="row.botSet"></td>
      <td ng-bind="row.botNumber"></td>
   </tr>
</tbody>

And, I have the response data in this format:

0: {botMainId: "A", botSet: "HK64604", botNumber: "786443174705883702", $$hashKey: "object:27"}
1: {botMainId: "A", botSet: "HK65825", botNumber: "595143174706013402", $$hashKey: "object:28"}
2: {botMainId: "A", botSet: "HK67383", botNumber: "281943174706142702", $$hashKey: "object:29"}
3: {botMainId: "B", botSet: "HK72557", botNumber: "922443174706654102", $$hashKey: "object:30"}
4: {botMainId: "B", botSet: "HK73332", botNumber: "724243174706716502", $$hashKey: "object:31"}
5: {botMainId: "A", botSet: "HK74025", botNumber: "379943174706764502", $$hashKey: "object:32"}
6: {botMainId: "A", botSet: "HK74694", botNumber: "825843174706807002", $$hashKey: "object:33"}
7: {botMainId: "C", botSet: "HK74819", botNumber: "563543174706827202", $$hashKey: "object:34"}
8: {botMainId: "C", botSet: "HK75964", botNumber: "423643174706902802", $$hashKey: "object:35"}
9: {botMainId: "B", botSet: "HK76384", botNumber: "678043174706923902", $$hashKey: "object:36"}

From this data, the dropdown on the first row, second row and third dow should hold the inital value as A and then B, C as the other dropdown values.

The fourth and fifth row should hold B as the initial value and C and A as the other dropdown values and so on.

Now, my js of what I've tried so far:

$http({
                                    'url' : '/myURL',
                                    'method' : 'POST',
                                    'headers' : {
                                        'Content-Type' : 'application/json'
                                    }
                                }).then(function(response) {
                                    console.log(response.data);
                                    var arrayLength = response.data.length;
                                    for (var i = 0; i < arrayLength; i++) {
                                       /* console.log(response.data[i].botMainId);*/
                                        var botRuleCode1 = null;
                                        var botRuleCode2 = null;
                                        var botRuleCode3 = null;
                                        if (response.data[i].botMainId == 'A'){
                                            botRuleCode1 = 'A';
                                            botRuleCode2 = 'B';
                                            botRuleCode3 = 'C';
                                        } else if (response.data[i].botMainId == 'B'){
                                            botRuleCode1 = 'B';
                                            botRuleCode2 = 'A';
                                            botRuleCode3 = 'C';
                                        } else {
                                            botRuleCode1 = 'C';
                                            botRuleCode2 = 'B';
                                            botRuleCode3 = 'A';
                                        }
                                        $scope.botIds = [ {
                                            id : botRuleCode1,
                                            name : botRuleCode1
                                        }, {
                                            id : botRuleCode2,
                                            name : botRuleCode2
                                        }, {
                                            id : botRuleCode3,
                                            name : botRuleCode3
                                        }];

                                        $scope.botId = $scope.botIds[0];
                                    }
                                    $scope.botData = response.data;

                                    $window.scrollTo(0, 0);

                                })

This script will take the last value of the for is set for all the dropdowns, making a common dropdown value for all the rows.

Can someone help on how could I change this code?

Dov Vachman · Accepted Answer · 2019-10-23 06:57:55Z

1

+50

The problem with your code is that you are using the same ngModel botId for each row in your repeater.

It would be better to have a different object to store the selection value per each item, so you can fill it right after your data is returned from the API call. Something like this illustrates the described approach:

angular.module("myApp", [])
    .constant('POSSIBLE_OPTIONS', ['A', 'B', 'C'])
    .controller("MyController", ['POSSIBLE_OPTIONS', function (POSSIBLE_OPTIONS) {
        var ctrl = this;

        ctrl.display_republish_records = [
            {botMainId: "A", botSet: "HK64604", botNumber: "786443174705883702"},
            {botMainId: "A", botSet: "HK65825", botNumber: "595143174706013402"},
            {botMainId: "A", botSet: "HK67383", botNumber: "281943174706142702"},
            {botMainId: "B", botSet: "HK72557", botNumber: "922443174706654102"},
            {botMainId: "B", botSet: "HK73332", botNumber: "724243174706716502"},
            {botMainId: "A", botSet: "HK74025", botNumber: "379943174706764502"},
            {botMainId: "A", botSet: "HK74694", botNumber: "825843174706807002"},
            {botMainId: "C", botSet: "HK74819", botNumber: "563543174706827202"},
            {botMainId: "C", botSet: "HK75964", botNumber: "423643174706902802"},
            {botMainId: "B", botSet: "HK76384", botNumber: "678043174706923902"}
        ];

        ctrl.posibbleOptions = getUniqueValuesV2(ctrl.display_republish_records, 'botMainId')
            .map(optionsMapper);

        ctrl.posibbleOptionsFromConstant = POSSIBLE_OPTIONS
            .map(optionsMapper);

        ctrl.selectionModel = {};

        angular.forEach(ctrl.display_republish_records, function (bot) {
            ctrl.selectionModel[bot.botNumber] = ctrl.posibbleOptions.filter(function (opt) {
                return opt.id === bot.botMainId;
            })[0];
        });

        function optionsMapper(id) {
            return {
                id: id,
                name: id
            }
        }


        function getUniqueValues(array, prop) {
            return [...new Set(array.map(item => item[prop]))];
        }
        
        function getUniqueValuesV2(array, prop) {
          return array.map(function(item) {
                      return item[prop];
                    }).filter(function(item, i, ar){ 
                      return ar.indexOf(item) === i;  
                    });
        }

    }]);

pre {
    max-width: 100%;
    word-break: break-word;
    white-space: pre-wrap;
}

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController as $ctrl">
    <hr/>

    <table>

        <tr valign="middle" st-select-row="row" st-select-mode="multiple"
            ng-repeat="row in $ctrl.display_republish_records track by row.botNumber"
            ng-attr-id="{{::row.botMainId}}-{{::row.botNumber}}">
            <td>
                <select class="custom-select" style="margin-left:0px" ng-model="$ctrl.selectionModel[row.botNumber]"
                        ng-options="choice.name for choice in $ctrl.posibbleOptions track by choice.id">
                    <option value="" hidden readonly="" ng-hide="true"></option>
                </select>
            </td>
            <td ng-bind="row.botSet"></td>
            <td ng-bind="row.botNumber"></td>
        </tr>

    </table>


    <hr/>

    <h3>Debug info:</h3>

    <code>
        <pre>{{$ctrl.posibbleOptionsFromConstant}}</pre>
    </code>
    <hr/>

    <code>
        <pre>{{$ctrl.posibbleOptions}}</pre>
    </code>
    <hr/>

    <code>
        <pre>{{$ctrl.selectionModel}}</pre>
    </code>

</div>

edited Oct 23, 2019 at 6:57

Dov Vachman

687 bronze badges

answered Nov 14, 2018 at 11:32

Stanislav Kvitash

4,63221 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mike Over a year ago

You deserve this bounty man !! But just a small clarification. What if my list contains only A and B as the botMainIds. This dropdown will not be populating the option C right? How to bring in that? I suppose you missed that.

Mike Over a year ago

Even though A and B are the only elements in the list, even C should be in the dropdown !

Stanislav Kvitash Over a year ago

@Mike hey, hope this helped you! I think to get all the possible values - the best way of doing this - is to make an API call that would query db for all the possible options (probably filtered by some other business logic before going to the client). A bit easier way - is to have it as a constant (see how ctrl.posibbleOptionsFromConstant is populated) in you angularjs module. I avoided your if/else method of populating the option list just for the simplicity of the example.

Mike Over a year ago

Great man ! That was what I did. You got it :) Thanks for your help much !!

Mike Over a year ago

Stanislav.. The getUniqueValues function. Can I achieve this without the scope operator?

|

user10043313 · Accepted Answer · 2018-11-13 09:18:21Z

0

Hello I have an example create for this case but i hope it helps.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $window) {
            $scope.Customers = [
                { Name: "John Hammond", Country: "United States" },
                { Name: "Mudassar Khan", Country: "India" },
                { Name: "Suzanne Mathews", Country: "France" },
                { Name: "Robert Schidner", Country: "Russia" }
               ];
            $scope.GetDetails = function () {
                var details = '';
                $('[id*=tblCustomers] tr:not(:has(th))').each(function (index, item) {
                    var name = $scope.Customers[index].Name;
                    var country = $scope.Customers[index].Country;
                    var selected = $(item).find('[id*=ddlYesNo] option:selected').val()
                    details += "Name: " + name + "\nCountry: " + country + "\nAction: " + selected + "\n\n";
                });
                $window.alert(details);
            };
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <table id="tblCustomers" cellpadding="0" cellspacing="0">
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Country
                </th>
                <th>
                    Action
                </th>
            </tr>
            <tbody ng-repeat="m in Customers">
                <tr>
                    <td>
                        {{m.Name}}
                    </td>
                    <td>
                        {{m.Country}}
                    </td>
                    <td>
                        <select id="ddlYesNo">
                            <option value="">Select</option>
                            <option value="Yes">Yes</option>
                            <option value="No">No</option>
                        </select>
                    </td>
                </tr>
            </tbody>
        </table>
        <br />
        <input type="button" value="Get Details" ng-click="GetDetails()" />
    </div>
</body>
</html>

answered Nov 13, 2018 at 9:18

user10043313

3 Comments

Mike Over a year ago

Thanks @Xenis for your answer. However, the condition should be for the select dropdown. The requirement is, whenever the div is loaded, the default value of the dropdown should be based on the response obtained.

Mike Over a year ago

Consider the dropdown is assigned to the Country option. Assume this data: John from USA, Mudassar from India, Suzanne from USA again and Robert from Russia, the Country dropdown should have USA as default for John and Suzanne. (The other values should be India and Russia) And for Robert, the default value should be Russia. The other values should be USA and India. Hope I am clear

user10043313 Over a year ago

Yeah i understand what you mean. i will have a try to create a better Ex.

dharmanshu soni · Accepted Answer · 2021-12-14 17:05:44Z

This is JS for showing listing with drop down in it

incidentDataList = [{IncidentId:1,Name:'Test',Description:'Test',AssignedUser: 'demo', IncidentStatus: 'Open'},{IncidentId:1,Name:'Test',Description:'Test',AssignedUser: 'demo', IncidentStatus: 'Resolved'}];
$scope.updateStatus = function (incidentData,index) {
 const headers = {
     'content-type': 'application/json',
     'Access-Control-Allow-Origin': '*',
     'Access-Control-Allow-Methods': 'GET,POST,OPTIONS,DELETE,PUT',
     'Access-Control-Allow-Credentials': 'true'
 };
 $scope.showerror = false;
 $scope.alert.error = "";
 $scope.showsuccess = false;
 $scope.alert.success = "";
 incidentData.IncidentStatus = $scope.incidentDataList[index].IncidentStatus;
 $http.put('/updateIncident', JSON.stringify(incidentData),{ 'headers': headers }).then(function (response) {
     if (response.data)
     {    $scope.showsuccess = true;
          $scope.alert.success = "Status " + incidentData.IncidentStatus +" updated successfully ";
          $scope.incidentData = {};
     }
 }, function (response) {
     if (response.data)
     {    
         $scope.showerror = true;
         $scope.alert.error = "Error while updating " + $scope.incidentData.Name;
     }
 });

}

This is you HTML code, write this select code inside list

<select ng-change="updateStatus(data,$index)" ng-model="incidentDataList[$index].IncidentStatus" class="form-control" ng-options="x for x in IncidentStatusList" aria-describedby="IncidentStatus" placeholder="Incident Status">

Select Incident Status

Collectives™ on Stack Overflow

Display dropdown on table data cell in html using angularjs

3 Answers 3

6 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related