Question

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

1970xxxx

所有有角度的js入门知识都可以正常工作，只是代码的这一部分不更改$ scope.showStages函数中输入（#stage_caption_i和#stage_value_i）的背景颜色。我不知道怎么了。

Answer 1

在这里，您尝试执行的操作更加“角度化”。我建议您保留jQuery知识，因为它实际上只能在指令中以非常有限的方式使用。正如georgeawg所述，您不应在控制器中进行DOM操作。相反，您应该修改模型的值，然后将所有特定于视图的内容放入HTML中。

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

不需要id值，但是我将它们包含在内以说明如何使用$index，以防万一您决定采用在单独的数组中存储可见性的方法。您可以使用$index中的ng-repeat值来引用可见性数组中的适当元素。

控制器和视图的这种分离将有助于长期的可维护性，并防止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>

为什么输入没有改变颜色？

1 个答案: