luca luca - 5 months ago 24
jQuery Question

Form with angularjs doesn't fill all fields

Hi' I'm new in angulajs and I'm using it to create a modal with form inside.
In my javascript I receive only two field of my form (name and clientVersion) the other two are obmitted and I don't know why.
This is my modal:

<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>


In my javascript code I have

//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);
};
});


and newUser has only those two fields. Do you know why?

Answer

First error is in

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

I gave the wrong idRole. The checkbox is a prolem of bootstrap plugin, without it all works. I found this directive and work:

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);
                  }
              });
          }
      };
  }
  ]);

but perhaps it is better to use

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

and store state into a variable.