所有字段的角集形式数据

时间:2016-07-25 06:38:07

标签: javascript angularjs forms

我仍然处于棱角分明的状态,当我想更新用户用自己的数据填充表单时,我不知道如何制作表单。我有这样的控制器:

        // 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>

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

感谢。

2 个答案:

答案 0 :(得分:0)

您必须更新模型。例如

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>

依此类推......你必须在你的视图中使用你的控制器实例。

答案 1 :(得分:0)

每当你想在模板中使用来自控制器(或指令)的数据时,它必须绑定到控制器的$ scope。

.controller('myFormController', function () {

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

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

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