Question

我已经构建了一个基于表的半自定义DataGrid，该表具有基于Service调用自动填充的字段.DataGrid中的预期行为是用户修改系统中的条目的能力（在这种情况下），Documents）以便用户可以选择一个动作并“替换”该文件及其文件类型。实际的标记看起来像这样：

<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>

正如您可能看到的，存在的一个问题是$ scope.replaceFile是全面调用的。当在replace操作中调用$ scope.ClearAssociatedFile（）（代码如下）时，此值设置为true，因此每个字段都将被取消隐藏。这是对我的严重疏忽，我想知道，在这里重新实现组件的最佳方法是什么，以便我可以拆分replaceFile（绑定到ng-show，并在父控制器内部未经注册），使其独立一旦选择了ClearAssociatedFile事件，它就可以被改变吗？

$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";

    //Revise the File Type field to its default.
    document.getElementById("replace-file-doctype-"+inheritDocumentId).value = event.target.attributes[2].value;

    //Show existing fields
    //eval($scope.replaceFile+inheritDocumentId = true);
    var replaceFileKey = "replaceFileItem"+$filter('convert_dashes')(inheritDocumentId);
    $scope[replaceFileKey] = true;
};

Answer 1

在您的控制器中，声明以下变量

$scope.replaceFileKeys = {};

使用以下

替换ClearAssociatedFile函数中的最后2行

var replaceFileKey = inheritDocumentId;
$scope.replaceFileKeys[replaceFileKey] = true;

按以下方式更新ng-show

ng-show="$scope.replaceFileKeys[record.document_id]"

通过上述更改，仅隐藏与您交互的项目。如果您对此更改有疑问，请现在就告诉我。

使用Angular分割多个要隐藏/显示的元素

1 个答案: