所有字段的角度集形式数据

angular set form data for all fields

本文关键字：数据 字段      更新时间：2023-09-26

我对angular还是个新手，当我想更新用户以用他自己的数据填写表单时，我不知道如何制作表单。我有这样的控制器：

        // take data for organization from database            
        dataService.allOrganization().then(function (data) {
            vm.allOrg = data;
        });
        // take data for user from database
        dataService.getOneUser(theId).then(function(data) {
            vm.oneUserUpdate = data;
        });
        $scope.user = {};
        $scope.submitForm = function(theId) {
            $scope.user.idUser = theId;
            dataService.updateUserPost($scope.user).then(function (data) {
                vm.oneUserInfo = data;//response from http request
            })
        }

在视图中：

<form name="userForm" ng-submit="submitForm(userDataCtr.oneUserUpdate.identities[0].user_id)">
            <div class="form-group">
                <label>Encryption Key :</label>
                <input type="text" class="form-control" name="encryption" ng-model="user.encryption" >
            </div>
            <div class="form-group">
                <label>Admin :</label>
                <select class="form-control" name="admin" ng-model="user.admin">
                    <option>Select...</option>
                    <option value="true">True</option>
                    <option value="false">False</option>
                </select>
            </div>
            <div class="form-group">
                <label>Organization ID:</label>
                <select class="form-control" name="organization" ng-model="user.organization">
                    <option>Select...</option>
                    <option ng-repeat="org in userDataCtr.allOrg" value="{{org.id_org}}">
                        {{org.name_org}}
                    </option>
                </select>
            </div>
            <div class="form-group">
                <label></label>
                <div class="checkbox">
                    <label><input type="checkbox" value="1" name="role_cro" ng-model="user.role_cro">ROLE_CRO</label>
                </div>
                <div class="checkbox">
                    <label><input type="checkbox" value="1" name="role_client" ng-model="user.role_client">ROLE_CLIENT</label>
                </div>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>

如果可能的话，如何用用户数据填充所有数据，输入字段要有值，如果需要，复选框要选中，选择要选择的组织选项，等等。

谢谢。

您必须更新模型。例如

dataService.getOneUser(theId).then(function(data) {
        vm.user={};
        vm.user.encryption = data.encryption;
        vm.user.role_client = data.role;
    });

可视

<div ng-controller="Mycontroller as my">
<div class="form-group">
                <label>Encryption Key :</label>
                <input type="text" class="form-control" name="encryption" ng-model="my.user.encryption" >
</div>
</div>

等等…你必须在视图中的控制器实例中使用。

每当您想在模板内使用来自控制器（或指令）的数据时，它都必须绑定到控制器的$scope。

.controller('myFormController', function () {
    dataService.allOrganization().then(function (data) {
        // Populate our scope the required data
        $scope.allOrg = data;
    });
});

现在我们可以使用ng模型将这些变量绑定到我们的表单字段
<input type="text" name="firstName" ng-model="allOrg.firstName">

并非所有表单元素的行为都相同。您应该查看有角度的文档，以获得更深入的表单绑定示例
角度形式文档

相关文章：