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

Question

使用案例

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

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

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

这样做的目的是在单击此切换按钮时通过切换CSS规则来更改前端。在此特定项目中，它将前端从使用网格视图转换为编号列表视图。

问题

• 是否可以在不影响$ 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的，但它很好地解释了嵌套表单上下文的想法。