为什么选择值不使用角度显示?

时间:2014-08-17 11:49:49

标签: angularjs angularjs-directive angular-schema-form

我正在使用角度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

1 个答案:

答案 0 :(得分:2)

<强> EDITED

ngModelOptions适用于表单,而不适用于架构。您必须覆盖表单定义中的选项,而不是将其作为全局设置:

  $scope.form = [
    "name",
    "student",
    "email",
    {
      key: "title",
      ngModelOptions: { updateOn: 'default' }
    },
    {
      type: "submit",
      title: "Save"
    }
  ];