如何将从数据库返回的json对象绑定到jsp页面中的下拉列表

时间:2016-04-28 10:59:00

标签: angularjs

我正在使用Spring MVC,我对jQuery非常熟悉,但是现在我们需要使用angularjs,问题是我的IDE中有一个角度js MVC结构。即控制器和服务。我通过服务从控制器调用REST API并获取对象列表,现在我希望Object列表与JSP页面中的DropDown列表绑定。我尝试了很多选择但是做不到,请帮助我。 我正在显示以下代码

jsp页面代码

这里我如何绑定控制器

<div data-ng-controller="UserController as ctrl">
    <div class="form-group required">
        <label for="role" class="col-sm-5 control-label">Role</label>
        <div class="col-sm-6">  
            <select class="form-control"  ng-model="selectedRole"
                ng-options="roleVo.roleName for roleVo in roleVoList">
                <option value=""></option>
            </select>
        </div>
    </div>

user_controller(angularjs)

 'use strict';
    var App = angular.module('myApp',[]);    
    alert("user_controller");
    App.controller('UserController', ['$scope', 'UserService', 
            function($scope, UserService) {
              var self = this;     
              self.roleVo={
                      roleId:'',roleName:''
              };
              selfroleVoList=[];                     
          self.getAllRole= function(){
              alert("Hi");
              UserService.getAllRole()
                  .then(
                       function(d) {
                            self.roleVoList = d;
                       },
                        function(errResponse){
                            console.error('Error while fetching Roles');
                        }
                     );
          };          
          $scope.init = function () {
               alert("init");
               self.getAllRole();
               alert("after getAllRole");            
          }          
         $scope.init();//on Form Load
    }]);
user_service(angularjs)
var App = angular.module('myApp',[]);
 App.factory('UserService', ['$http', '$q', function($http, $q){    
        return {            
            getAllRole: function() {
                return $http.get('http://localhost:8080/tasktrac/user/getAllRole')
                    .then(
                        function(response){
                            return response.data;
                        }, 
                        function(errResponse){
                            console.error('Error while fetching role list');
                            return $q.reject(errResponse);
                        }
                    );
            },
    }
    }]);

0 个答案:

没有答案