javascript - Form with angularjs doesn't fill all fields -
i'm using angularjs create modal used form. in javascript receive 2 fields of form (name , clientversion) other 2 omitted , don't know why. 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">×</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 role.role role in roles track 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 version.name version in versions track 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 javascript code have
//angular section 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; // callback called asynchronously // when response available }, function errorcallback(response) { // called asynchronously if error occurs // or server returns response error status. }); $http({ method: 'get', url: 'version', }).then(function successcallback(response) { $scope.versions = response.data.result; // callback called asynchronously // when response available }, function errorcallback(response) { // called asynchronously if error occurs // or server returns response error status. }); $scope.createuser = function(newuser) { $scope.master = angular.copy(newuser); }; }); and newuser has 2 fields. know why?
first error in
data-ng-options="role.idrole role.role role in roles track role.role" i gave wrong idrole. checkbox prolem of bootstrap plugin, without works. found directive , 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 better use
$('input[name="my-checkbox"]').on('switchchange.bootstrapswitch', function(event, state) and store state variable.
Comments
Post a Comment