javascript - 如何在不影响 FormController.$pristine 的情况下更改表单的 CSS 类？

Question

用例

使用 AngularJS，我有一个带有切换按钮的表单 - 使用 ui.bootstrap.buttons 中的单个切换按钮。此切换按钮存在于表单本身中。

问题在于，通过切换此按钮，它会将 $pristine 设置为 false，因为表单的状态已更改。不幸的是，$pristine 也用于禁用/启用其他 UI 组件。因此，切换按钮也会更改其他 UI 组件的状态。

将切换移到 ng-form 之外可以解决问题，但在这种特殊情况下，我想避免这种情况，因为它需要一些讨厌的 CSS 来修复按钮。

这样做的目的是在单击此切换按钮时通过切换 CSS 规则来更改前端。在这个特定元素中，它将前端从使用 GridView 转换为编号 ListView 。

问题

• 是否可以在不影响 $pristine 的情况下创建切换？

代码

这是一个jsFiddle这是我的用例的过度简化版本。我使用了复选框而不是切换按钮，但它们都做同样的事情。

HTML:

<div ng-app="app" ng-controller="ctrl" ng-class="view">
    <ng-form role="form" name="myForm" >
        <label>Name:</label>
        <input type="text" name="name" ng-model="name" />
        <input type="checkbox" name="view" ng-model="view"
          ng-true-value="list" ng-false-value="grid"
          />
        <p>
            Is myForm pristine? {{ myForm.$pristine }}
        </p>
    </ng-form>
</div>

JavaScript:

var app = angular.module('app', []);

function ctrl($scope) {
    $scope.view = 'grid';   
}

CSS:

div {
    border: 1px solid;
    padding: 1em;
}

.list {
    border-color: red;
}

.grid {
    border-color: blue;
}

Answer 1

您可以使用 ng-form 为单独的验证规则创建嵌套的表单上下文。

基于在此 blog post 中找到的 plnkr我更新了它，在这个 plnkr 中也用 $pristine 标志来展示这个想法。

我知道这是基于 ng-repeat 但它很好地解释了嵌套表单上下文的想法。