Мне нужна небольшая помощь для перечисления входных данных с условиями, я хочу показать дочерние входы по родительскому входному значению, если дочерний вход имеет то же значение, что и родительский, он будет показан в противном случае, он будет скрыт.
Я не хочу использовать какой-либо сценарий третьей стороны для этого, мне просто нужен волхв c прикоснуться к фрагменту.
Спасибо за вашу помощь.
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $http) {
$scope.CUSTOM_FIELDS = [{
ID: '1',
NAME: 'A',
TYPE: 'input',
REQUIRED: 'true',
ORDER: '1',
DATA: 'A',
SELECT_OPTIONS: null,
FORM_ID: '1',
CONDITION: false,
APPLICANT_TYPE: 'individual',
ACTIVE: true,
NODES: [{
ID: '2',
NAME: 'B',
TYPE: 'input',
REQUIRED: 'true',
ORDER: '2',
DATA: 'B',
SELECT_OPTIONS: null,
FORM_ID: '1',
CONDITION: {
STATUS: true,
ID: '1',
VALUE: '1',
},
APPLICANT_TYPE: 'individual',
ACTIVE: true,
NODES: [{
ID: '3',
NAME: 'C',
TYPE: 'input',
REQUIRED: 'true',
ORDER: '2',
DATA: 'C',
SELECT_OPTIONS: null,
FORM_ID: '1',
CONDITION: {
STATUS: true,
ID: '2',
VALUE: '2',
},
APPLICANT_TYPE: 'individual',
ACTIVE: true,
NODES: [],
}, ],
}, ],
},
{
ID: '1',
NAME: 'D',
TYPE: 'input',
REQUIRED: 'true',
ORDER: '1',
DATA: 'A',
SELECT_OPTIONS: null,
FORM_ID: '1',
CONDITION: false,
APPLICANT_TYPE: 'individual',
ACTIVE: true,
NODES: [],
},
];
});
<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<title>Custom Plunker</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<script type="text/ng-template" id="CUSTOM_FIELDS.html">
<ul>
<li ng-repeat="FIELD in CUSTOM_FIELDS">
<label class="text-bold">{{FIELD.NAME}} {{FIELD.CONDITION.VALUE}}</label>
<input ng-required="FIELD.REQUIRED" type="text" ng-model="FIELD.DATA" />
<div ng-switch on="FIELD.NODES.length > 0">
<div ng-init="CUSTOM_FIELDS = FIELD.NODES;" ng-include="'CUSTOM_FIELDS.html'"></div>
</div>
</li>
</ul>
</script>
<div ng-include="'CUSTOM_FIELDS.html'" ng-model="CUSTOM_FIELDS"></div>
</body>
</html>