angularjs获取不到ng-model绑定的值
0
悬赏园豆：30
[待解决问题]
两个下拉列表：
<select class="form-control" data-ng-change="MenuChange(menuId)" data-ng-model="menuId" id="MenuList" name="MenuList">
<option value="">===请选择===</option>
<option value="1">系统概要</option>
<option value="2">角色管理</option>
<option value="3">账号管理</option>
<option value="4">产品管理</option>
</select>
<select class="form-control" data-ng-change="RoleCateChange()" data-ng-model="RoleCateId" id="RoleList" name="RoleList">
<option value="">===请选择===</option>
</select>
<select class="form-control multiple-select2" id="RoleNameItems" multiple="multiple" name="RoleNameItems"><option value="">===请选择===</option>
</select>
js代码:
1 /* 添加模块：菜单、角色类别、角色名称三级联动 */ 2 app.controller('moduleCon', function ($scope, $http) { 3 $scope.MenuChange = function (menuId) { 4 //alert('menuId:' + menuId); 5 if (menuId.length > 0) { 6 $http.get('/Modules/GetRolesByMenuId', { params: { menuId: menuId } }).then(function (response) { 7 $('select[name="RoleList"] option:gt(0)').remove(); 8 angular.forEach(response.data, function (data, idx, array) { 9 $('<option></option>').val(data.Value).text(data.Text).appendTo($('select[name="RoleList"]'));//由于不能使用ng-option所以通过$http.get获取后台数据循赋值 10 }); 11 }); 12 } else { 13 $('select[name="RoleList"] option:gt(0)').remove(); //请选择 14 } 15 }; 16 $scope.RoleCateChange = function () { 17 var roleId = $scope.RoleCateId; 18 alert('roleId:' + roleId);//问题：每次运行到这里就取不到$scope.RoleCateId的值，提示为null 19 $('select[name="RoleNameItems"] option:gt(0)').remove(); 20 if (roleId.length > 0) { 21 $http.get('/Modules/GetRoleNames', { params: { roleId: roleId } }).then(function (response) { 22 angular.forEach(response.data, function (data, idx, array) { 23 $('<option></option>').val(data.Value).text(data.Text).appendTo($('select[name="RoleNameItems"]')); 24 }); 25 }); 26 } 27 }; 28 });
程序原本要实现的效果是：Id=MeunList的Select变更时动态赋值Id=RoleList的Select，Id=RoleList变更时动态赋值Id=RoleNameItems的Select
现在的问题时当Id=RoleList的Select变更时取不到当前值RoleCateId，提示为null。
求教各位大侠该怎么处理，是不是哪里写的不对，要怎么才实现这个三级联动效果。
所有回答(1)
0
你用了ng-model，又使用jq去操作表单dom，这样会让angular失控的。
<select class="form-control" data-ng-change="MenuChange(menuId)" data-ng-model="menuId" id="MenuList" name="MenuList"> <option value="">===请选择===</option> <option value="1">系统概要</option> <option value="2">角色管理</option> <option value="3">账号管理</option> <option value="4">产品管理</option> </select> <select class="form-control" data-ng-change="RoleCateChange()" data-ng-model="RoleCateId" id="RoleList" name="RoleList"> <option value="">===请选择===</option> <option ng-repeat="item in level2Opts" ng-value="item.value">{{item.text}}</option> </select> <select class="form-control multiple-select2" id="RoleNameItems" multiple="multiple" name="RoleNameItems"> <option value="">===请选择===</option> <option ng-repeat="item in level3Opts" ng-value="item.value">{{item.text}}</option> </select>
$scope.MenuChange = function() { $scope.level2Opts = [ { value: 11, text: 'level2-1' }, { value: 12, text: 'level2-2' } ]; }; $scope.RoleCateChange = function(){ $scope.level3Opts = [ { value: 111, text: 'level3-1' }, { value: 112, text: 'level3-2' } ]; }
