In developing a semi-custom DataGrid that utilizes a table with fields populated via a Service call, one key feature is to allow users to modify entries (in this case, Documents) by selecting an action to "Replace" the file and its File Type. The current markup structure for this functionality is as follows:
<form action="#" method="post" ng-model="OtherDocumentsForm" style="margin-top: 15px;">
<h3 style="margin: 0;">Additional Documents</h3>
<table>
<tr>
<th>File Type</th>
<th>File Name</th>
<th>Date</th>
</tr>
<tr ng-repeat="record in DocumentsOther track by $index" id="row-{{record.file_url}}">
<td>
<span data-document-type="{{record.file_type}}" data-document-id='{{record.document_id}}'>{{record.file_type}}</span>
<select ng-model="newDocumentType" id="replace-file-doctype-{{record.document_id}}" placeholder="Choose file Type" ng-show="$scope.replaceFile" data-document-id="{{record.document_id}}" class="replaceComboBox"> <!-- Note replaceFile -->
<option label="" value="" selected="selected"></option>
<option label="PDF" value="pdf">PDF</option>
<option label="Image" value="image">Image</option>
</select>
</td>
<td>
<div ng-if="record">
<a href="{{record.file_url}}">{{record.document_name}}</a>
<!-- Replace Action-->
<button class="replaceAssociatedRecord" ng-click="ClearAssociatedFile($event, this, '{{record.file_url}}', '{{record.document_id}}');" data-document-type="{{record.file_type_raw}}">Replace</button>
<input type="file" ng-model="replaceFileField" id="replace-file-{{record.document_id}}" data-document-id="{{record.document_id}}" data-document-type="{{record.file_type_raw}}" onclick="checkIfAssocFileDefined(this);" ng-show="replaceFile" class="replaceFileField" /> <!-- Note replaceFile -->
</div>
</td>
<td>
{{record.date_created | dateConsistent}}
</td>
</tr>
</table>
<button ng-click="addUncategorizedFile($event)" style="margin: 5px auto 15px; display: block;">Upload additional file</button>
</form>
An issue arises from the use of $scope.replaceFile being applied universally. When triggered by $scope.ClearAssociatedFile() (see code snippet below), it sets the value to true for all fields, causing all to be displayed. I am looking for a better way to redesign these components so that the behavior of replaceFile (linked to ng-show and uninitialized within the parent controller) can be isolated and manipulated separately once ClearAssociatedFile is initiated. What would be the most effective approach to achieve this?
$scope.ClearAssociatedFile = function(event, elem, parentClassName, inheritDocumentId) {
event.preventDefault();
event.stopPropagation();
//TODO reconfigure to use event
//document.getElementById("row-"+parentClassName).children[0].children[0].innerHTML = "";
event.currentTarget.parentElement.parentElement.parentElement.children[0].children[0].innerHTML = "";
//event.currentTarget.parentElement.parentElement.parentElement.children[0].children[1].style.display = "inline-block"
//document.getElementById("row-"+parentClassName).children[1].children[0].children[0].innerHTML = "";
event.currentTarget.parentElement.parentElement.parentElement.children[1].children[0].children[0].innerHTML = "";
//document.getElementById("row-"+parentClassName).children[1].children[0].children[1].style.display = "none";
event.currentTarget.parentElement.parentElement.parentElement.children[1].children[0].children[1].style.display = "none";
//event.currentTarget.parentElement.parentElement.parentElement.children[1].children[0].children[2].style.display = "inline-block";
//Restore default File Type field value.
document.getElementById("replace-file-doctype-"+inheritDocumentId).value = event.target.attributes[2].value;
//Show existing fields
var replaceFileKey = "replaceFileItem"+$filter('convert_dashes')(inheritDocumentId);
$scope[replaceFileKey] = true;
};