JSFiddle - React, Tailwind, and code Playground
HTML
<table ng-controller="MyFirstController as fc">
<thead>
<th>Field-1</th>
<th>Operator</th>
<th>Field-2</th>
<th>Comments</th>
</thead>
<tbody>
<tr ng-repeat="i in conditionslv">
<td>
<select ng-model="i.expression1" required>
<option ng-repeat="item in fc.field1dropdown" value="{{item.FieldName}}">{{item.DisplayName}}</option>
</select>
</td>
<td>
<select ng-model="i.operatortypeid" ng-required="true" ng-options="item.OperatorTypeId as item.OperatorTypeName for item in fc.operatordropdown"></select>
</td>
<td>
<input type="text" ng-model="i.expressionvalue" ng-disabled="i.expression2value!=''||i.operatortypeid>5">/
<select ng-model="i.expression2value" ng-disabled="i.expressionvalue!=''||i.operatortypeid>5" required>
<option ng-repeat="item in fc.field1dropdown" value="{{item.FieldName}}">{{item.DisplayName}}</option>
</select>
</td>
<td>
<textarea rows="1" cols="40" ng-model="i.comments"></textarea><span ng-click="conditionslv.splice($index,1)" ng-if="conditionslv.length>1"><span class="k-icon k-font-icon k-i-x"></span></span>
</td>
</tr>
</tbody>
</table>
JavaScript
angular.module('myFirstApp', [])
.controller('MyFirstController', function($scope) {
var flowchart = this;
$scope.conditionslv = [];
flowchart.field1dropdown = [{
"FieldName": "",
"DisplayName": "select"
}, {
"FieldName": "se",
"DisplayName": "se"
}, {
"qw": "",
"DisplayName": "qw"
}]
flowchart.operatordropdown = [{
"OperatorTypeId": '',
"OperatorTypeName": "select",
"WFSubConditions": []
}, {
"OperatorTypeId": 1,
"OperatorTypeName": "Greater Than",
"WFSubConditions": []
}]
flowchart.addconditionrow = function() {
$scope.conditionslv.push({
expression1: '',
operatortypeid: '',
expressionvalue: "",
expression2value: "",
comments: ""
});
console.log(JSON.stringify($scope.conditionslv));
}
flowchart.cancelConditons = function() {
flowchart.diagramshow = true;
flowchart.conditions = false;
}
flowchart.saveconditions = function() {
}
flowchart.addconditionrow();
});