Question

我正在使用angularjs来创建表单使用的模态。在我的javascript中，我只收到我的表单的两个字段（name和clientVersion），另外两个字段被省略，我不知道为什么。这是我的模式：

<div class="modal" id="addUserModal" data-ng-app="myApp">
    <div class="modal-dialog" data-ng-controller="modalController">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">New user</h4>
            </div>
            <div class="modal-body">
                <form novalidate class="simple-form">
                    <!-- form start -->
                    <div class="box-body">
                        <div class="form-group">
                            <label>Name</label> <input id="name" type="text"
                                data-ng-model="newUser.name" class="form-control"
                                maxlength="30" placeholder="Version name" required>
                        </div>
                        <div class="form-group">
                            <label>Role</label> <select class="form-control select2"
                                style="width: 100%;" name="role" data-ng-model="newUser.role"
                                data-ng-options="user.idRole as role.role for role in roles track by role.role">
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Client Version </label> (optional) <select
                                class="form-control select2" style="width: 100%;"
                                name="version" data-ng-model="newUser.clientVersion"
                                data-ng-options="version.idClientVersion as version.name for version in versions track by version.name">
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Enable </label> <input type="checkbox"
                                data-ng-model="newUser.enabled" name="my-checkbox" checked>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left"
                    data-dismiss="modal">Close</button>
                <button id="uploadVersionButton" type="button"
                    class="btn btn-primary" data-ng-click="createUser(newUser)">Create
                    user</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

在我的javascript代码中我有

//Angular section for Select2 of modal create user
var app = angular.module('myApp',[]);
app.controller('modalController', function($scope, $http) {
        $http({
            method: 'GET',
            url: 'roles'
        }).then(function successCallback(response) {
            $scope.roles = response.data.result;
            // this callback will be called asynchronously
            // when the response is available
        }, function errorCallback(response) {
            // called asynchronously if an error occurs
            // or server returns response with an error status.
        });
        $http({
            method: 'GET',
            url: 'version',
        }).then(function successCallback(response) {
            $scope.versions = response.data.result;
            // this callback will be called asynchronously
            // when the response is available
        }, function errorCallback(response) {
            // called asynchronously if an error occurs
            // or server returns response with an error status.
        });
        $scope.createUser = function(newUser) {
            $scope.master = angular.copy(newUser);
          };
});

和newUser只有这两个字段。你知道为什么吗？

Answer 1

第一个错误在

data-ng-options="role.idRole as role.role for role in roles track by role.role"

我给了错误的idRole。该复选框是一个bootstrap插件的问题，没有它的全部工作。我找到了这个指令并且工作：

app.directive('bootstrapSwitch', [
  function() {
      return {
          restrict: 'A',
          require: '?ngModel',
          link: function(scope, element, attrs, ngModel) {
              element.bootstrapSwitch();

              element.on('switchChange.bootstrapSwitch', function(event, state) {
                  if (ngModel) {
                      scope.$apply(function() {
                          ngModel.$setViewValue(state);
                      });
                  }
              });

              scope.$watch(attrs.ngModel, function(newValue, oldValue) {
                  if (newValue) {
                      element.bootstrapSwitch('state', true, true);
                  } else {
                      element.bootstrapSwitch('state', false, true);
                  }
              });
          }
      };
  }
  ]);

但也许最好使用

$('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state)

并将状态存储到变量中。

带有angularjs的表单不会填满所有字段

1 个答案: