Question

我正在尝试使用两个字段创建一个angularjs表单，一个文本输入和一个选择。默认情况下，文本输入为空，但select应具有值（select上的第一个元素）。我正在关注angularjs表单文档并使用一个主对象，它在重置时被复制到页面的模型中。这就是事情，如果我将select设置为默认值，它就会变成空白。如果我对文本字段执行相同操作，则会显示默认值。下面你会找到我的代码，这里是plunker。我认为它可能与重置函数上的副本有关，但我在那时将对象打印到控制台，看起来它正在被复制。如果我尝试在没有主要内容的情况下执行此操作，只需将其直接设置为用户而不是调用重置就可以了。

控制器

(function(angular) {
  'use strict';
angular.module('formExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.master = {};

    $scope.businessUnits = [{"businessUnitId":1,"name":"Auto"},{"businessUnitId":2,"name":"Life"},{"businessUnitId":3,"name":"Health"},{"businessUnitId":4,"name":"Surety"},{"businessUnitId":5,"name":"Finance"},{"businessUnitId":6,"name":"Dwelling"}];
    $scope.master.businessUnit = $scope.businessUnits[0];
    $scope.master.name = "John";

    $scope.update = function(user) {
      $scope.master = angular.copy(user);
    };

    $scope.reset = function(form) {
      if (form) {
        form.$setPristine();
        form.$setUntouched();
      }
      $scope.user = angular.copy($scope.master);
      console.debug($scope.user.businessUnit);
    };
    $scope.reset();
  }]);
})(window.angular);

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example33-production</title>


  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
  <script src="script.js"></script>



</head>
<body ng-app="formExample">
  <div ng-controller="ExampleController">
  <form name="form" class="css-form" novalidate>
    Name:
    <input type="text" ng-model="user.name" name="uName" required="" />
    <br />
    <div ng-show="form.$submitted || form.uName.$touched">
      <div ng-show="form.uName.$error.required">Tell us your name.</div>
    </div>

    E-mail:
    <input type="email" ng-model="user.email" name="uEmail" required="" />
    <br />
    <div ng-show="form.$submitted || form.uEmail.$touched">
      <span ng-show="form.uEmail.$error.required">Tell us your email.</span>
      <span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
    </div>
<select class="form-control" ng-model="user.businessUnit" ng-options="unit as unit.name for unit in businessUnits" required></select>
    Gender:
    <input type="radio" ng-model="user.gender" value="male" />male
    <input type="radio" ng-model="user.gender" value="female" />female
    <br />
    <input type="checkbox" ng-model="user.agree" name="userAgree" required="" />

    I agree:
    <input ng-show="user.agree" type="text" ng-model="user.agreeSign" required="" />
    <br />
    <div ng-show="form.$submitted || form.userAgree.$touched">
      <div ng-show="!user.agree || !user.agreeSign">Please agree and sign.</div>
    </div>

    <input type="button" ng-click="reset(form)" value="Reset" />
    <input type="submit" ng-click="update(user)" value="Save" />
  </form>
</div>
</body>
</html>

Answer 1

将以下代码添加到<select>

ng-init="user.businessUnit = businessUnits[0]"

它应该是这样的：

<select class="form-control" ng-model="user.businessUnit" ng-init="user.businessUnit = businessUnits[0]" ng-options="unit as unit.name for unit in businessUnits" required></select>

AngularJS表单 - 选择的默认值

1 个答案: