JSFiddle - React, Tailwind, and code Playground

by Danish Farman

HTML

<div ng-app ng-controller="MyCtrl">
    <div ng-repeat="email in contactInfo.emails">
        <input id="email" type="text" ng-model="email.email" />
        <select id="emailType" ng-model="email.emailTypeId" ng-options="k as v for (k, v) in emailTypes">
            <option value="">Choose...</option>
        </select>
    </div>
    <br/>
    <br/>
    <label>Preferred e-mail:</label>
    <select style="margin-left: 20px; width: 50%;" id="preferred-email" ng-model="contactInfo.preferredEmail" ng-options="getEmail(email) for email in (contactInfo.emails | filter:filterEmail) track by email.id">
        <option value="">Choose...</option>
    </select>
</div>

JavaScript

function MyCtrl($scope) {
    $scope.contactInfo = {
        emails: [{
            "id": 1100,
                "emailTypeId": "2",
                "email": "[email protected]"
        }, {
            "id": 1200,
                "emailTypeId": "1",
                "email": "[email protected]"
        }]
    };
    $scope.emailTypes = {
        "1": "Personal",
            "2": "Professional",
            "3": "Other"
    };
    $scope.filterEmail = function (email) {
        return (email.email);
    }

    $scope.getEmail = function (email) {
        if (email.emailTypeId) {
            return email.email + ' (' + $scope.emailTypes[email.emailTypeId] + ')';
        }
        return email.email;
    }

}