JSFiddle - React, Tailwind, and code Playground

by sachin92k

HTML

<div ng-app="myApp" ng-controller="SomeController">
    <div ng-repeat="Person in People">
        <div class="listheader">{{Person.firstName}} {{Person.lastName}}</div>
        <div class="listitem" ng-repeat="Choice in Person.Choices">
            {{Choice.Name}}: 
            <select 
                ng-model="Choice.SelectedOption"                 
                ng-options="namee for namee in [1,2,3,4,5,6,7,8,9]"></select>
            {{Choice.SelectedOption.ID}}
        </div>
    </div>
</div>

CSS

body{
    font-family: verdana;
    font-size: 10pt;
}

.listheader{
    font-weight: bold;
    text-decoration: underline;
    padding-top: 5px;
}

JavaScript

var myApp = angular.module('myApp', []);
myApp.controller("SomeController", function($scope) {
    $scope.People = [{
        "firstName": "John",
        "lastName": "Doe",
        "Choices": [
            {
                "Name":"Dinner",
                "SelectedOption":5
            },
            {
                "Name":"Lunch",
                "SelectedOption":1
            }
        ],        
    }, {
        "firstName": "Jane",
        "lastName": "Doe"
    }];
});