Question

我有一个编辑按钮，可以打开一个用于编辑记录的引导模式：

    <a href="#" ng-click="getAction(action.id, 'edit')"
       data-toggle="modal" data-target="#modalEditAction"
       class="functionalLinks">
       <i class="glyphicon glyphicon-pencil"></i>
          EDIT
    </a>

getAction（action.id，＆＃39; edit＆＃39;）如下所示：

         $scope.getAction = function (actionId, populateObject) {
            $http.get(actionUrl + '/' + actionId)
               .then(function (response) {
                   // Test front end exception message;
                   // throw "test exception";
                   switch (populateObject) {
                       case "details":
                           $scope.data.actionDetails = response.data;
                           break;
                       case "edit":
                           $scope.data.editAction = response.data;
                           $scope.dimAt1EditActionRecommendedByLerSelections();
                           break;
                   }
               })
               .catch(function (error) {
                   $scope.data.actionDetailsError = error;
               });
        }

所以我们对＆＃34;编辑＆＃34;感兴趣开关的情况：响应数据如下所示（查看actionsRecommendedByLer属性）：

{
  "caseId": 8,
  "case": null,
  "actionTypeId": 1,
  "actionType": {
    "actionTypeName": "Actions Taken By Management",
    "caseType": 1,
    "id": 1
  },
  "dateCreated": "2017-05-08T14:55:23.797",
  "actionStatus": 3,
  "notes": "bngfhfrg455",
  "actionType1Id": null,
  "actionType1": {
    "actionId": 1,
    "actionsRecommendedByLer": [
      {
        "actionType1Id": 1,
        "lookUpDetailId": 4,
        "name": "Alternative Discipline Agreement in lieu of # day Suspension",
        "id": 1
      },
      {
        "actionType1Id": 1,
        "lookUpDetailId": 7,
        "name": "Arbitration",
        "id": 2
      },
      {
        "actionType1Id": 1,
        "lookUpDetailId": 13,
        "name": "Complaint - EEO Formal",
        "id": 3
      }
    ],
    "actionProposedBySupervisorId": 4,
    "actionProposedBySupervisor": {
      "id": 4,
      "displayValue": "Alternative Discipline Agreement in lieu of # day Suspension",
      "code": "",
      "parentId": null,
      "externalSystemId": null,
      "isInactive": false,
      "inactivDate": null,
      "sortOrder": null,
      "discriminator": "",
      "lookupMaster": null,
      "lookUpMastersId": 1
    },
    "actionTakenBySupervisorId": 8,
    "actionTakenBySupervisor": {
      "id": 8,
      "displayValue": "AWOL Letter (CORPS)",
      "code": "",
      "parentId": null,
      "externalSystemId": null,
      "isInactive": false,
      "inactivDate": null,
      "sortOrder": null,
      "discriminator": "",
      "lookupMaster": null,
      "lookUpMastersId": 1
    },
    "actionCharges": [
      {
        "actionType1Id": 1,
        "lookUpDetailId": 211,
        "name": "Creating hostile work environment",
        "id": 1
      }
    ],
    "actionEffectiveDate": "2017-05-16T04:00:00",
    "id": 1
  },
  "actionType17Id": null,
  "actionType17": null,
  "id": 1
}

我使用响应数据显示一个带有检测按钮的表，基本上显示了选择的选项如下：

    <select class="pull-right" id="editActionRecommendedByLerSelect"
            ng-model="data.editAction.actionType1.actionRecommendedByLerId">
        @*<option value="0"></option>*@
        <option value="{{managmentAction.id}}"
                ng-repeat="managmentAction in data.managementActions">
            {{managmentAction.displayValue}}
        </option>
    </select>
    <br />
    @*{{data.editAction.actionType1.actionRecommendedByLerId}}*@
    <table class="table table-condensed table-bordered">
        <tr ng-show="data.editAction.actionType1.actionsRecommendedByLer.length == 0">
            <td colspan="2" class="noResultText">No Actions Recommended By LER</td>
        </tr>
        <tr ng-repeat="actionRecommendedByLer in data.editAction.actionType1.actionsRecommendedByLer">
            <td>
                <a href="#" ng-click="removeAnEditActionRecommendedByLerFromActionType1(actionRecommendedByLer.id)"
                   class="functionalLinks text-danger">
                    <i class="glyphicon glyphicon-trash"></i>
                    DELETE
                </a>
            </td>
            <td>@*{{actionRecommendedByLer.id}} :*@ {{actionRecommendedByLer.name}}</td>
        </tr>
    </table>

select由一系列选项填充。选项ID将与actionRecommendedByLer id的appropritate lookupDetailId匹配。在集合中。

＆＃34;编辑＆＃34; $ scope.getAction（actionId，populateObject）中的开关大小写：

$scope.dimAt1EditActionRecommendedByLerSelections();

称之为：

$scope.dimAt1EditActionRecommendedByLerSelections = function () {
            console.log("In dimAt1EditActionRecommendedByLerSelections");
            console.log("Length: " + $scope.data.editAction.actionType1.actionsRecommendedByLer.length);
            var element;       
            for (i = 0; i < $scope.data.editAction.actionType1.actionsRecommendedByLer.length; i++) {
                console.log("i: " + i);
                console.log("id: " + $scope.data.editAction.actionType1.actionsRecommendedByLer[i].lookUpDetailId);
                element = $('#editActionRecommendedByLerSelect option[value = "' + $scope.data.editAction.actionType1.actionsRecommendedByLer[i].lookUpDetailId + '"]');
                element.attr('disabled', 'disabled');
                element.css('background-color', 'yellow');
            }
        }

基本上我使用jQuery在选择下拉黄色和禁用中选择已经选择的多个选项。这可以从我的Add Bootstrap模式中轻松完成。但是将它们全部重新加载进行编辑并对正确的方法进行高亮显示会更加困难。

这可以在选择下拉菜单中显示，黄色突出显示的选项名称和在删除按钮旁边的表格中呈现的模型中禁用。唯一的问题是，在我再次点击编辑按钮之前，它不会显示高亮显示的选项。

如何在第一次编辑点击时将其设置为高亮显示并禁用选项？

更新1 （回复评论user1120808）

我尝试了你的答案，但它没有用。实际上现在它甚至不能用于第二次点击。

这看起来是否正确执行了您的建议？

$scope.dimAt1EditActionRecommendedByLerSelections = function () {
            console.log("In dimAt1EditActionRecommendedByLerSelections");
            console.log("Length: " + $scope.data.editAction.actionType1.actionsRecommendedByLer.length);
            var element;       
            for (i = 0; i < $scope.data.editAction.actionType1.actionsRecommendedByLer.length; i++) {
                console.log("i: " + i);
                console.log("id: " + $scope.data.editAction.actionType1.actionsRecommendedByLer[i].lookUpDetailId);
                // force scope digest.
                $scope.$evalAsync(() => {
                    element = $('#editActionRecommendedByLerSelect option[value = "' + $scope.data.editAction.actionType1.actionsRecommendedByLer[i].lookUpDetailId + '"]');
                    element.attr('disabled', 'disabled');
                    element.css('background-color', 'yellow');
                });
            }
        }

Answer 1

你没有看到它的原因，是因为jquery在角度和角度之外运行并不会捡起它。它不再被评估。但是，通过第二次单击，您将触发摘要循环，然后您将看到它。所以你需要做的是强制消化周期。您可以使用$evalAsync。

尝试以下方法：

$scope.$evalAsync(() => {
    element = $('#editActionRecommendedByLerSelect option[value = "' + $scope.data.editAction.actionType1.actionsRecommendedByLer[i].lookUpDetailId + '"]');
    element.attr('disabled', 'disabled');
    element.css('background-color', 'yellow');
});

Answer 2

$ timeout服务解决了问题：

anchors.right: displayImage.left

在Angular中第二次单击之前，使用jQuery更改选项标记中的css不起作用

2 个答案: