Javascript 如何更改表单'；不影响FormController的CSS类。$pristine？ 用例

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

问题是，通过切换此按钮，它会将

$pristine

设置为false，因为表单的状态已更改。不幸的是，

$pristine

还用于禁用/启用其他UI组件。因此，切换按钮也会更改其他UI组件的状态

在

ng表单

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

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

问题

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

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

HTML:

CSS:

---

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

基于在本文中找到的plnkr，我对其进行了更新，在本文中也使用了$pristine标志来显示该想法

---

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

哇，这很简单！我忘了你可以嵌套ng表单。

<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>

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

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

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

.list {
    border-color: red;
}

.grid {
    border-color: blue;
}