为什么输入不改变颜色？

Question

我正在使用 jquery 的 angularjs 应用程序，似乎无法更改某些输入的背景颜色。简而言之，当用户单击“隐藏舞台”文本或“取消隐藏舞台”文本时，输入框背景应分别变为白色/浅灰色。但唯一改变的是“隐藏阶段”到“取消隐藏阶段”之间的文本，这很好。这是angularjs文件：

function stages($scope,$rootScope,$apiSrvc,$compile){
  // defintions
  // setting up stages statuses to angular array.
  $scope.stages_visibilities = ['unhidden','unhidden','unhidden','unhidden','unhidden','unhidden','unhidden','unhidden'];

  // changes the stage's status and it's visibility settings
  $scope.setStageStatus = function(stageN,status){ 
    $scope.stages_visibilities[stageN] = 'hidden';
    if(status === 'unhide'){ 
      $scope.stages_visibilities[stageN] = 'unhidden';
    }

    $scope.showStages();
  }; 

  // shows the stage rows.
  $scope.showStages = function() { 
    // update(populate) the caption/value rows
    $('#stages_rows').empty();
    $nStages = parseInt($scope.nStages);
    var stage_row = "";
    for(var i=0; i < $nStages; i++){
        stage_row += '<div class="stage_row">'+
        '<input type="text" id="stage_caption_'+i+'" class="stg_caption" />'+
        '<input type="number" id="stage_value_'+i+'" class="stg_val" />';
        // show hide/unhide for this stage.
        if($scope.stages_visibilities[i] === 'unhidden'){
          stage_row += '<span id="stage_hide_unhide_'+i+'" class="hide_unhide_stg" ng-click="setStageStatus('+i+',\'hide\')">hide stage</span>';
          // set row color to white.
          $("#stage_caption_"+i).css("background-color","white");
          $("#stage_value_"+i).css("background-color","white");
          $("#stage_value_"+i).prop('disabled', false);
          $("#stage_caption_"+i).prop('disabled', false);
        }
        else { 
          stage_row += '<span id="stage_hide_unhide_'+i+'" class="hide_unhide_stg" ng-click="setStageStatus('+i+',\'unhide\')">un-hide stage</span>';
          // set row color to lightgrey.
          $("#stage_caption_"+i).css("background-color","lightgrey");
          $("#stage_value_"+i).css("background-color","lightgrey");
          $("#stage_value_"+i).prop('disabled', true);
          $("#stage_caption_"+i).prop('disabled', true);
        }
        stage_row += '</div>';
    }  
    $("#stages_rows").append(stage_row);

    // register new directives to angularjs
    $compile($("#stages_rows").contents())($scope);
  }
}

所有有角度的 js 初步工作都可以正常工作，只是代码的那一部分不会改变 $scope.showStages 函数中的输入（#stage_caption_i 和 #stage_value_i）的背景颜色。我不知道出了什么问题。

Answer 1

对于您正在尝试做的事情，这是一种更“有角度”的方法。我建议你把你的 jQuery 知识放在一边，因为它真的应该只在指令中以非常有限的方式使用。正如 georgeawg 提到的，您不应该在控制器中进行 DOM 操作。相反，您应该修改模型的值，然后将所有特定于视图的内容放入 HTML。

首选方法是将隐藏/可见状态作为模型上的属性，而不是使用该数据维护一个单独的数组。当然，您仍然可以使用数组，但是当您想要更改类或切换禁用状态时，您必须编写一个方法来检查相应数组中的可见性值。当视图为每个项目回调时，使用这样的方法会导致控制器和视图之间产生大量流量。在像这样的小样本上可能不明显，但在更大的视图上可能会导致性能问题。即使您从数据库或后端的其他存储中获取这些数据，您仍然可以扩展模型以在客户端包含可见性属性。

id 值不是必需的，但我将它们包括在内以展示如何使用$index，以防您决定将可见性存储在单独的数组中。您可以使用 ng-repeat 中的 $index 值来引用可见性数组中的正确元素。

控制器和视图的这种分离将有助于长期可维护性，并防止 Angular 和 jQuery 在操作 DOM 元素时相互干扰。

angular.module('app', [])
  .controller('ctrl', ($scope) => {
    $scope.stages = [{
      caption: 'Stage 0',
      value: 0,
      hidden: false
    }, {
      caption: 'Stage 1',
      value: 1,
      hidden: false
    }, {
      caption: 'Stage 2',
      value: 2,
      hidden: false
    }, {
      caption: 'Stage 3',
      value: 3,
      hidden: false
    }, {
      caption: 'Stage 4',
      value: 4,
      hidden: false
    }, {
      caption: 'Stage 5',
      value: 5,
      hidden: false
    }, {
      caption: 'Stage 6',
      value: 6,
      hidden: false
    }, {
      caption: 'Stage 7',
      value: 7,
      hidden: false
    }];

    // changes the stage's status and its visibility settings
    $scope.setStageStatus = (stage) => {
      stage.hidden = !stage.hidden;
    };
  });

.hidden {
  background-color: lightgray;
}

.unhidden {
  background-color: white;
}

.hide_unhide_stg {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div class="stage_row" ng-repeat="stage in stages">
    <input type="text" 
           id="stage_caption_{{$index}}" 
           class="stg_caption" 
           ng-model="stage.caption"
           ng-disabled="stage.hidden"
           ng-class="{hidden: stage.hidden, unhidden: !stage.hidden}" />
    <input type="number" 
           id="stage_value_{{$index}}" 
           class="stg_val" 
           ng-model="stage.value" 
           ng-disabled="stage.hidden"
           ng-class="{hidden: stage.hidden, unhidden: !stage.hidden}" />
    <span class="hide_unhide_stg" 
          ng-click="setStageStatus(stage)"><span ng-if="stage.hidden">un-</span>hide stage</span>
  </div>
</div>