Question

我正在创建一个动态表单渲染器，它从数据库中获取字段列表并呈现它们，以便用户可以输入数据并将其发送到数据库。

现在我正在添加功能，将评估设置为具有选项的字段，使其根据用户选择的选项进行基数评估。

/* load fields from database
the result looks like $scope.fields = [{field_name: "dishes", 
input_type:  "radio", options:["{number: 20, value: 'tuna'}",
"{number: 30, value:'salmon'}"], id: "id1", is_evaluated: true }]
i know the watcher wont look into dict info so that's why i keep the
option dicts as strings
(i dont really remember the correct JSONparse syntax but assume i wrote
those dicts correctly)
*/
watchers = [];
for(field in $scope.fields){
    if($scope.fields[field].is_evaluted == true){//there can be fields which don't have numeric evaluation
        watchers.push($scope.$watch(function(){
            return $scope.values[$scope.fields[field].id];
        },
        function(){
            console.log("watcher triggered");
            console.log("new value is:" + JSON.parse($scope.values[$scope.fields[field].id]).value)
        });
    }
}

其中$ scope.values是一个字典，它的键是字段ID，用于保持选项的选择，数据库处理需要选项值，“数字”是我们用于html显示的数字评估（那些console.logs实际上是用于显示评估的jquery / angular代码）注意：可能存在未评估的字段

在尝试应用程序之前，一切似乎都很好，只有最后评估的字段被观看（就像我添加了9个评估字段，3个非评估字段和所有观察者在同一个字段上触发）

注2：我已经看到了这个Dynamically add $watch问题给了我这个想法，遗憾的是我无法使用确切的保存代码有两个原因1：他们使用数组而我使用dict，2：他们关心的是输入值，而我只想看到它改变，所以我可以使用其他值

那我应该改变什么呢？为什么所有观察者看起来都是最后一个变量而不是我想给他们的变量？任何帮助将非常感激

我的HTML是这样的：

<div ng-repeat="field in fields">
    <ng-if="field.input_type == 'radio'">
        <ng-repeat="option in field.options">
            <input type="radio" value={{option}} ng-model="$scope.Values[field.id]">{{option.value}}</ng-if>
        </ng-repeat>
    </ng-if>
</div>

这里有更多的html ...（比如每种类型的输入但是无线电是评估字段的完美示例）这将呈现两个无线电输入一个说金枪鱼，另一个说鲑鱼，所以当我选择三文鱼我想显示我得到的30分，当我切换到金枪鱼我想显示20

动态地将观察者添加到输入

0 个答案: