1

我正在使用 Angular js。并将 json 转换为表单我不知道为什么选择值或选择选项不显示.. 这是 plunker http://plnkr.co/edit/wbziK5aRUg69JuwXDoVy?p=preview 问题步骤：运行应用程序和更改它不会显示的下拉值。但是当您按下按钮然后更改它的下拉值它将显示..为什么？

<!DOCTYPE html>
<html>

<head>

  <link data-require="bootstrap-css@3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />


  <link rel="stylesheet" href="style.css" />

</head>

<body ng-app="test" ng-controller="FormController">

  <form name="ngform" sf-schema="schema" sf-form="form" sf-model="model" sf-options="{ formDefaults: { ngModelOptions: { updateOn: 'blur' } }}" ng-submit="onSubmit(ngform)"></form>

  <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="//dl.dropboxusercontent.com/s/icrciconaesuw29/tv4.js?m="></script>
  <script data-require="angular.js@*" data-semver="1.3.0-beta.18" src="//code.angularjs.org/1.3.0-beta.18/angular.js"></script>
  <script src="//dl.dropboxusercontent.com/s/unk0id7tmc9w0mm/angular-sanitize.js?m="></script>
  <script src="//dl.dropboxusercontent.com/s/rk0dfetihiqs7bi/ObjectPath.js"></script>
  <script src="//dl.dropboxusercontent.com/s/8fq4c4t7jct4w4h/schema-form.js?m="></script>
  <script type="text/javascript" src="//textalk.github.io/angular-schema-form/dist/bootstrap-decorator.min.js"></script>

  <script>
    angular.module('test', ['schemaForm']).controller('FormController', function($scope, $http) {
      $scope.schema = {
        type: "object",
        properties: {
          name: {
            type: "string",
            minLength: 2,
            title: "Name",
            description: "Name or alias",
            required: true
          },
          "student": {
            type: "string",
            title: "studentname",
            description: "Name or student",
            required: false
          },

          "email": {
            "title": "Email",
            "type": "string",
            "minLength": 2,
            "pattern": "^\\S+@\\S+$",
            onChange: function(modelValue,form) {
      console.log("Password is"+modelValue);
          },
            validationMessage: {
              200: "Address is too short, man.",
              "default": "Just write a proper address, will you?" //Special catch all error message
            },
            "description": "Email will be used for evil.",
            required: true
          },
          title: {
            type: "string",
            required: true,
            enum: ['dr', 'jr', 'sir', 'mrs', 'mr', 'NaN', 'dj']
          }
        }
      };

      $scope.form = [
        "*", {
          type: "submit",
          title: "Save"
        }
      ];

      $scope.model = {};
      $scope.onSubmit = function(form) {
        // First we broadcast an event so all fields validate themselves
        $scope.$broadcast('schemaFormValidate');

        // Then we check if the form is valid
        if (form.$valid) {
          // ... do whatever you need to do with your data.
        }
      }
    })
  </script>

</body>

</html>

我正在使用这个文档：https ://github.com/Textalk/angular-schema-form/blob/master/docs/index.md#global-options

4

1 回答 1

2

已编辑

ngModelOptions应用于表单，而不是架构。您必须覆盖表单定义中的选项，而不是将其保留为全局设置：

  $scope.form = [
    "name",
    "student",
    "email",
    {
      key: "title",
      ngModelOptions: { updateOn: 'default' }
    },
    {
      type: "submit",
      title: "Save"
    }
  ];
于 2014-10-17T17:23:14.290 回答