Question

我正在尝试以角度创建动态表单。如果type为text，则输入为<input type="text">。如果type为checkbox，则会显示<input type="checkbox">

这是我在服务器中成功请求的数据，我放入控制器$scope

.controller('FormCtrl', function($scope){
    $scope.form_data = [
       {"id":1,"question":"Name","type":"text","user_criteria":"faiz","answer":[]},
       {"id":5,"question":"Hair Type","type":"checkbox","user_criteria":"Long","answer":[{"id_answer":10,"id_survey":5,"answer_txt":"Long"},{"id_answer":11,"id_survey":5,"answer_txt":"Short"}]}
    ];

    $scope.updated_form = {};
});

这是模板

<div ng-repeat="fm in form_data">
    <div ng-if="fm.type =='text'">
        <label>{{fm.question}}</label>
        <input type="text" ng-model="{{fm.user_criteria}}">
    </div>
    <div ng-if="fm.type =='checkbox'">
        <div ng-repeat="ans in fm.answer">
            <input type="checkbox"> {{ans.answer_txt}}
        </div>
    </div>
</div>

表示输入类型text的值。它显示label打印Name，输入value打印faiz。代码成功显示到正确的输入类型和值。

但我有两个问题。

是否可以通过复选框检查user_criteria到check checkbox输入的值？

如何将所有这些数据传递到$scope.updated_form，以便我可以像这样使用输入中的值？

$scope.updated_form = [
    {"id":1, "user_criteria": "faiz new name"},
    {"id":5, "user_criteria": "Short"}
];

我被迫传递表格数据进行处理，因为nested loop

checkbox

Answer 1

我做了一个小样本来解决你的问题：

http://jsbin.com/pahuwe/3/edit?html,js,output

我使用了初始填充功能，将数据传输到updated_form字段：

$scope.updated_form = [];
$scope.form_data.forEach(function(item) {
    $scope.updated_form.push(item);
});

我使用输入无线电进行选择，但是使用了模型和值参数：

<input type="radio" ng-model="fm.user_criteria" ng-value="ans.id_answer"/>

使用相同的ng-model来允许选择唯一的响应。

Answer 2

我的理解是，您想知道用户检查和输入的内容，您可以使用其他模型来存储用户数据。（您需要使用ids初始化updated_form）对于复选框，您需要添加具有ng-change的函数以将检查的答案设置为相关数据。它就像

<div ng-repeat="fm in form_data">
<div ng-if="fm.type =='text'">
    <label>{{fm.question}}</label>
    <input type="text" ng-model="{{updated_form[fm.id].user_criteria}}">
</div>
<div ng-if="fm.type =='checkbox'">
    <div ng-repeat="ans in fm.answer">
        <input type="checkbox" ng-model="theChecked" ng-change=" if (theChecked) updated_form[fm.id].user_criteria = ans.answer_txt; "> {{ans.answer_txt}}
    </div>
</div>

角度ng-loop动态输入和动态值到数据处理

2 个答案: