AngularJS控制器中设置表单元素role_id值的实现求助

在AngularJS中不要直接操作DOM（比如getElementById这类原生方法），框架是数据驱动的，你只需要修改绑定的模型值，视图会自动同步更新。

具体修改方案： #

1. 先在控制器中初始化persInfo对象，避免因对象未定义导致双向绑定失效
2. 在formToggle方法中直接给persInfo.role_id赋值，不用操作DOM元素

修改后的Controller.js代码：

var crudApp = angular.module('crudApp',[]);
crudApp.controller("DbController",['$scope','$http', function($scope,$http){
    // 初始化persInfo对象，确保双向绑定正常工作
    $scope.persInfo = {};
    
    $scope.formToggle = function(id){
        $('#persForm').slideToggle();
        // 直接通过模型设置role_id值
        $scope.persInfo.role_id = id;
    }
}]);

（可选）用AngularJS原生方式控制表单显示（替代jQuery） #

如果想更贴合Angular的开发模式，可以去掉jQuery的slideToggle，用ng-show控制表单显示状态：

修改后的Index.html：

<button class="btn btn-custom" ng-click="formToggle(1)"> Add Role 1</button>
<button class="btn btn-custom" ng-click="formToggle(2)"> Add Role 2</button>
<form class="form-horizontal" name="persForm" id="persForm" ng-submit="insertInfo(persInfo);" ng-show="showForm">
    <input type="hidden" name="role_id" id="role_id" class="form-control" ng-model="persInfo.role_id" value="" />
</form>

对应的控制器代码：

var crudApp = angular.module('crudApp',[]);
crudApp.controller("DbController",['$scope','$http', function($scope,$http){
    $scope.persInfo = {};
    $scope.showForm = false;
    
    $scope.formToggle = function(id){
        $scope.showForm = !$scope.showForm;
        $scope.persInfo.role_id = id;
    }
}]);

这种方式完全基于Angular的数据驱动理念，避免了直接操作DOM的问题，更符合框架的设计规范。

内容的提问来源于stack exchange，提问作者aussie_guy