JSFiddle - React, Tailwind, and code Playground

by Danish Farman

HTML

<div ng-controller="new_test_controller">
    <div id="dynamic-content-holder">
        Select devices:<br>
        
        <table id="devices-table" class="table">
            <tr ng-repeat="item in requiredDevices"  height="30">
                
                <td>
                    <select 
                    id="deviceList_{{$index}}"
                    name="deviceList_name_{{$index}}"
                    ng-model="item1"
                    ng-options="d.name for d in devices track by d.id"
                    ng-change="deviceChanged($index, item)"
                    >{{item}}
                    </select>
                    
                    <div id="device-options" ng-show="item1.id > -1">
                        <label for="all_{{$index}}">1. Choose all</label><input id="all_{{$index}}" type="radio" name="type_{{$index}}" value="1" ng-model="item.amountType" checked><br>
                        <label for="some_{{$index}}">2. Choose some</label><input id="some_{{$index}}" type="radio" name="type_{{$index}}" value="2" ng-model="item.amountType" ><br>
                        <label for="amount_{{$index}}">3. Choose amount</label><input id="amount_{{$index}}" type="radio" name="type_{{$index}}" value="3" ng-model="item.amountType" ><br>
                        
                        {{item}}
                        </div>
                        <br>
                        </td>
                        </tr>
                        
                        <tr id="add-device">
                            <td>
                                <br>
                                    <button id="add-device-button" ng-click="addDevice();">Add more</button>
                                    <button id="add-device-button" ng-click="showRequiredDevices();">Show required devices</button>
                                </td>
                                
                            </tr>
                        </table>
                       ...

JavaScript

var app = angular.module('app', []);

var new_test_controller = app.controller('new_test_controller', function($scope) {
    $scope.init = function() {
        $scope.current_customer = $scope.customers[0].first_name;
        
        $scope.addDevice();
    };
    
    $scope.test1_text = "";
    
	$scope.customers = 
					[
					 { "uid": 1, "first_name": "Rizwan", "last_name": "Zia" },
	                 { "uid": 2, "first_name": "Laura", "last_name": "Zia" },
	                 { "uid": 3, "first_name": "Sara", "last_name": "Zia" },
	                ];
    
    $scope.devices = [
                        {"id" : 1, "name": "scissors", "amount": 3, "amountType": -1},
                        {"id" : 2, "name": "jumppapallo", "amount": 3, "amountType": -1},
                        {"id" : 3, "name": "gymstick", "amount": 3, "amountType": -1},
                     ];
    
    $scope.requiredDevices = [

                    ];
    
    $scope.addDevice = function() {
        var device = {};
        
        device.tid = $scope.requiredDevices.length;
        device.id = -1;
        device.name = "";
        device.amount = 0;
        device.amountType = -1;
        
        console.log(device);
        $scope.requiredDevices.push(angular.copy(device));
    };
    
    $scope.showRequiredDevices = function() {
        console.log($scope.requiredDevices);
    };
    
    $scope.deviceChanged = function($index, item) {
        console.log('Device changed at index: ' + $index);
        console.log(item);
        //$scope.requiredDevices[$index] = item;
    };
    
	//console.log('Controller must have been initialized');
    $scope.init();
});