how to create a muticolumn combo box in angular js

Question

I want to have a two fields name and shade. these two fields should be shown as grid when i click a dropdown. and when i select a row from the grid only name should be binded to dropdown.some thing like this in the below link https://demos.devexpress.com/ASPxEditorsDemos/ASPxComboBox/MultiColumn.aspx below is my code

<script>
angular.module('selectExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.colors = [
      {name:'black', shade:'dark'},
      {name:'white', shade:'light'},
      {name:'red', shade:'dark'},
      {name:'blue', shade:'dark'},
      {name:'yellow', shade:'light'}
    ];
    $scope.myColor = $scope.colors[2]; // red
  }]);
</script>
<div ng-controller="ExampleController">
  <span >
    <select ng-model="myColor" ng-options="color.name for color in colors">
      <option value="">-- choose color --</option>
    </select>
  </span>

 </div>

Answer 1

You can try with this new directive : Note: This answer is based on your refrence link.

(function(){

var app = angular.module('selectExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
        $scope.colors = [
            { name: 'black', shade: 'dark' },
            { name: 'white', shade: 'light' },
            { name: 'red', shade: 'dark' },
            { name: 'blue', shade: 'dark' },
            { name: 'yellow', shade: 'light' }
        ];
        $scope.myColor = $scope.colors[2];

        // red
    }]);
app.directive('dropdown', function($timeout) {
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            list: '=dropdown',
            ngModel: '=',
            selectedKey: '=',
            dropHeader: '='
        },
        templateUrl: '/tpl.html',
        replace: true,
        link: function(scope, elem, attrs, ngModel) {
            scope.head = false;
            scope.tdArry = [];
            if (scope.dropHeader == true) scope.head = true;

            if (Array.isArray(scope.list)) {
                var p = scope.list.map(function(_item) {
                    var keys = Object.keys(_item);
                    if (keys.length > 0) {
                        if (scope.tdArry.length == 0) scope.tdArry = keys;
                        else {
                            var j = keys.map(function(_k) {
                                if (scope.tdArry.indexOf(_k) == -1)
                                    scope.tdArry.push(_k);
                            });
                        }
                        return;
                    } else return;
                })
            } else {
                console.log('Directive Expecting an array of values ')
            }
            scope.$watch('ngModel', function() {
                scope.selected = ngModel.$modelValue;
            });
            scope.update = function(thing) {
                ngModel.$setViewValue(thing);
                ngModel.$render();
            };
            scope.getUpdatedVal = function() {
                var selectedKey = scope.selectedKey;
                if (selectedKey) {
                    if (scope.ngModel[selectedKey]) return scope.ngModel[selectedKey];
                    else {
                        var k = Object.keys(scope.ngModel);
                        return scope.ngModel[k[0]];
                    }
                } else {
                    var k = Object.keys(scope.ngModel);
                    return scope.ngModel[k[0]]
                }
            }
        },
    }
})

})()

.title {
    padding: 5px 10px;
    border: 1px solid #ccc;
    cursor: pointer;
}

.title span {
    width: 100%;
    display: block;
    position: relative;
}

.title span:after {
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-bottom-width: 5px;
    border-bottom-style: solid;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-bottom: none;
    border-top-color: #201e1d;
    content: '';
    vertical-align: middle;
    display: inline-block;
    position: absolute;
    right: 2px;
    top: 8px
}

.drop-table {
    width: 100%;
    border-width: 0;
    border-collapse: collapse;
    border-spacing: 0;
}

.drop-table th {
    background: #eaeef2;
}

.drop-table th,
.drop-table td {
    text-align: left;
    padding: 5px 7px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<div ng-app="selectExample">
    <div ng-controller="ExampleController">
        <!-- <div> -->
        <div dropdown="colors" drop-header='true' selected-key="'name'" ng-model="myColor"></div>
    </div>

<script type="text/ng-template" id="/tpl.html">
    <div ng-click="open=!open">
        <div class="title">
            <span>{{getUpdatedVal()}}</span>
        </div>
        <table class="drop-table" ng-hide="!open">
            <tr ng-if="head">
                <th ng-repeat="h in tdArry">{{h}}</th>
            </tr>
            <tr ng-repeat="li in list" ng-click="update(li)">
                <td ng-repeat="d in tdArry">{{li[d]}}</td>
            </tr>
        </table>
    </div>
</script>
</div>