JSFiddle - React, Tailwind, and code Playground

by Adam Doherty

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="myApp" ng-controller="PhoneListCtrl">
    <table class="table" id="tbl" style="margin-top:-30px; width: 1380px">
        <tr>
            <th>Data</th>
            <th>Data2</th>
            <th>button</th>
        </tr>
        <tr data-ng-repeat="record in mydata" id="{{'tr'+record.id}}" style="color:#FF0000;">
            <td>
                <input type="text" data-ng-model="record.dataTxt" />
            </td>
            <td>
                <select class="form-control input-sm" data-ng-model="record.selectedData" data-ng-change="getData(record.id)" id="{{record.id}}">
                    <option data-ng-repeat="options in record.selectOption" value="{{options.optionss}}">{{options.optionss}}</option>
                </select>
            </td>
            <td>
                <input type="button" data-ng-click="freeSelect(record.id)" value="myData" />
                <input type="button" data-ng-click="addValue(record.id)" value="addValue" />
            </td>
        </tr>
    </table>
</div>

JavaScript

var myApp = angular.module('myApp', []);
myApp.controller('PhoneListCtrl', function ($scope) {
    $scope.mydata = [{
        id: "0",
        dataTxt: "1",
        selectOption: [{
            optionss: "--Please Select--"
        }, {
            optionss: "val11"
        }, {
            optionss: "val12"
        }],
        selectedData: "--Please Select--"
    }, {
        id: "1",
        dataTxt: "2",
        selectOption: [{
            optionss: "--Please Select--"
        }, {
            optionss: "val21"
        }, {
            optionss: "val22"
        }],
        selectedData: "--Please Select--"
    }];

    $scope.freeSelect = function (id) {
        console.log(JSON.stringify($scope.mydata));
        alert($scope.mydata[id].selectedData);
        $scope.mydata[id].selectOption = [];
        $scope.mydata[id].selectedData = "";
        console.log(JSON.stringify($scope.mydata));
        // $scope.$apply($scope.mydata);  
    };

    $scope.addValue = function (id) {
        console.log(JSON.stringify($scope.mydata));
        $scope.mydata[id].selectOption = [{
            optionss: "--Please Select--"
        }, {
            optionss: "val11"
        }];
        $scope.mydata[id].selectedData = "--Please Select--";
        console.log(JSON.stringify($scope.mydata));
    };
    $scope.getData = function (id) {
        alert($scope.mydata[id].selectedData);
    };
});