Question

使用单选按钮来回切换时，表单值会重置。为什么$scope.user重置并且不会保持持久性？

var app = angular.module("myApp", ["ui.bootstrap"]);

app.controller(
  "myCtrl",
  function($scope) {
    $scope.radio_test = "0";
    $scope.user = "John Doe";
  }
);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<body>
  <div ng-app="myApp" ng-controller="myCtrl" class="container">
    <div class="panel panel-default">
      <div class="panel-body">
        <div>
          <form>
            Choose:
            <label class="radio-inline"><input type="radio" ng-model="radio_test" value="0">First</label>
            <label class="radio-inline"><input type="radio" ng-model="radio_test" value="1">Second</label>
          </form>

          <br />
          <div ng-switch="radio_test">
            <div ng-switch-when="0">
              <div>
                <form ng-app="myApp" name="myForm" class="form-horizontal" novalidate>
                  <div class="form-group">
                    <label class="control-label col-sm-2" for="user">Username:</label>
                    <div class="col-sm-10">
                      <input type="text" name="user" ng-model="user" class="form-control" required />
                      <div style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
                        <div ng-show="myForm.user.$error.required">Username is required.</div>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
            <div ng-switch-when="1">
              <div>Something Else</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Answer 1

使用controller as语法（运行以下代码段以了解它如何解决问题）。

在您的代码中，您需要更改：

1 - 此

$scope.radio_test="0";
$scope.user="John Doe";

以

var vm = this; vm.radio_test = "0"; vm.user = "John Doe";

2 - 这：ng-controller="myCtrl" 到 ng-controller="myCtrl as vm"

3 - 您在视图中访问anyVar的所有位置（以及控制器$scope.anyVar中）至 vm.anyVar（在视图和控制器中。）

var app = angular.module("myApp", ["ui.bootstrap"]); app.controller( "myCtrl", function($scope) { // there is no need to use the $scope any more var vm = this; vm.radio_test = "0"; vm.user = "John Doe"; } );

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script> <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <div ng-app="myApp" ng-controller="myCtrl as vm" class="container"> <div class="panel panel-default"> <div class="panel-body"> <div> <form> Choose: <label class="radio-inline"><input type="radio" ng-model="vm.radio_test" value="0">First</label> <label class="radio-inline"><input type="radio" ng-model="vm.radio_test" value="1">Second</label> </form> <br /> <div ng-switch="vm.radio_test"> <div ng-switch-when="0"> <div> <form ng-app="myApp" name="myForm" class="form-horizontal" novalidate> <div class="form-group"> <label class="control-label col-sm-2" for="user">Username:</label> <div class="col-sm-10"> <input type="text" name="user" ng-model="vm.user" class="form-control" required /> <div style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid"> <div ng-show="myForm.user.$error.required">Username is required.</div> </div> </div> </div> </form> </div> </div> <div ng-switch-when="1"> <div>Something Else</div> </div> </div> </div> </div> </div> </div>

Answer 2

在$parent.user的输入上设置ng-model似乎可以解决问题。

var app = angular.module("myApp", ["ui.bootstrap"]);

app.controller(
  "myCtrl",
  function($scope) {
    $scope.radio_test = "0";
    $scope.user = "John Doe";
  }
);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<body>
  <div ng-app="myApp" ng-controller="myCtrl" class="container">
    <div class="panel panel-default">
      <div class="panel-body">
        <div>
          <form>
            Choose:
            <label class="radio-inline"><input type="radio" ng-model="radio_test" value="0">First</label>
            <label class="radio-inline"><input type="radio" ng-model="radio_test" value="1">Second</label>
          </form>

          <br />
          <div ng-switch="radio_test">
            <div ng-switch-when="0">
              <div>
                <form ng-app="myApp" name="myForm" class="form-horizontal" novalidate>
                  <div class="form-group">
                    <label class="control-label col-sm-2" for="user">Username:</label>
                    <div class="col-sm-10">
                      <input type="text" name="user" ng-model="$parent.user" class="form-control" required />
                      <div style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
                        <div ng-show="myForm.user.$error.required">Username is required.</div>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
            <div ng-switch-when="1">
              <div>Something Else</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

在两个元素之间切换时，Angular JS Form值重置

2 个答案: