为啥输入不改变颜色？

Posted 2023-05-08

【中文标题】为啥输入不改变颜色？

【英文标题】：Why aren't the inputs changing color?为什么输入不改变颜色？

【发布时间】：2019-01-27 04:25:05

【问题描述】：

我正在使用 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）的背景颜色。我不知道出了什么问题。

【问题讨论】：

请创建一个Minimal, Complete, and Verifiable Example。通读代码并理解每一行的作用太难了。

像这样将 AngularJS 与 jQuery 混合是自找麻烦。使用 AngularJS 框架，控制器不应该操纵 DOM。 DOM 操作应该在指令中完成。见“Thinking in AngularJS” if I have a jQuery background。

【参考方案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>