1) The Industry dropdown menu corresponds with a code textbox. Depending on the selected industry, the code will change accordingly.
2) There is a dynamic feature to add or delete Movie Names and Directors' names.
In this table, there are three columns: Movie Name, Director, and Industry Code.
We can dynamically add Movie Names and Directors' names, but the Industry Code needs to be selected from the aforementioned dropdown menu.
Whenever the Industry field is changed, a new code will be generated (e.g., selecting 'Tamil' will produce code 'TN'). Based on the chosen industry, all rows containing Industry Codes in the table should be updated.
<div data-ng-app data-ng-controller="myCtrl">
<label>Industry</label>
<select ng-model="data" ng-options="data as data.name for data in datas">
</select>
<label>code</label>
<input type="text" ng-model="data.code" disabled/>
<ul>
<li>Movie Name</li>
<li><input type="text" ng-model="name" /></li>
</ul>
<ul>
<li>Name of Director</li>
<li><input type="text" ng-model="director" /></li>
</ul>
<ul>
<li></li><li><button ng-click="addRow()"> Add Row </button></li>
</ul>
<table>
<tr>
<th>NO</th>
<th>Movie Name</th>
<th>Director</th>
<th>Industry Code</th>
</tr>
<tr ng-repeat="movies in movieArray">
<td><label>{{$index + 1}}</label></td>
<td><label>{{movies.name}}</label></td>
<td><label>{{movies.director}}</label></td>
<td><label>{{movies.code}}</label></td>
<td><input type="checkbox" ng-model="movies.Remove"/></td>
</tr>
</table>
<div>
<button ng-click="submit()">Submit Data</button>
<button ng-click="removeRow()">Remove Row</button>
</div>
<div id="display" style="padding:10px 0;">{{display}}</div>
controller:
function myCtrl($scope){
$scope.datas = [{
"id": 3,
"name": "Tamil",
"code": "TN"
}, {
"id": 4,
"name": "English",
"code": "EN"
},
{
"id": 5,
"name": "Telugu",
"code": "TE"
}]
$scope.movieArray =
[
{ 'name': 'Total Eclipse', 'director': 'Agniezka Hollan' ,'code': 'TN'},
{ 'name': 'My Left Foot', 'director': 'Jim Sheridan','code': 'TN' },
{ 'name': 'Forest Gump', 'director': 'Robert Zemeckis','code': 'TN' }
];
// GET VALUES FROM INPUT BOXES AND ADD A NEW ROW TO THE TABLE.
$scope.addRow = function () {
if ($scope.name != undefined && $scope.director != undefined) {
var movie = [];
movie.name = $scope.name;
movie.director = $scope.director;
$scope.movieArray.push(movie);
// CLEAR TEXTBOX.
$scope.name = null;
$scope.director = null;
}
};
// REMOVE SELECTED ROW(s) FROM TABLE.
$scope.removeRow = function () {
var arrMovie = [];
angular.forEach($scope.movieArray, function (value) {
if (!value.Remove) {
arrMovie.push(value);
}
});
$scope.movieArray = arrMovie;
};
// FINALLY SUBMIT THE DATA.
$scope.submit = function () {
var arrMovie = [];
angular.forEach($scope.movieArray, function (value) {
arrMovie.push('Name:' + value.name + ', Director:' + value.director);
});
$scope.display = arrMovie;
};
}