帶有angularjs的表單不會填充所有字段

Question

我正在使用angularjs創建表單使用的模式。 在我的JavaScript我只收到我的形式（名稱和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。 複選框是引導程序插件的原型，沒有它的所有作品。 我發現這個指令和工作：

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) 

和存儲狀態到一個變量。