Angularjs 在Angular中,无法绑定到页面加载指令中的单选按钮
当前情况:我有通过指令动态创建的表单字段。其中一种类型包括单选按钮 目标:在页面加载时,我需要将这些元素的值绑定到预定义的范围。这适用于其他字段类型,但不适用于单选按钮,尽管$parent.model与该选项完全匹配。正如您在JSFIDLE中所看到的,您的_name_0和description_1绑定正确,但不适用于单选按钮 约束:由于代码限制,指令的ng模型和ng值无法更改。我知道可以将单选按钮的模型绑定到对象。请参见以下内容以获取证据: 控制员:Angularjs 在Angular中,无法绑定到页面加载指令中的单选按钮,angularjs,angularjs-directive,radio-button,angularjs-ng-value,Angularjs,Angularjs Directive,Radio Button,Angularjs Ng Value,当前情况:我有通过指令动态创建的表单字段。其中一种类型包括单选按钮 目标:在页面加载时,我需要将这些元素的值绑定到预定义的范围。这适用于其他字段类型,但不适用于单选按钮,尽管$parent.model与该选项完全匹配。正如您在JSFIDLE中所看到的,您的_name_0和description_1绑定正确,但不适用于单选按钮 约束:由于代码限制,指令的ng模型和ng值无法更改。我知道可以将单选按钮的模型绑定到对象。请参见以下内容以获取证据: 控制员: function MyCtrl($scope
function MyCtrl($scope) {
//defines the field types
$scope.formFields = [
{
"fieldName": "Your Name",
"uniqueId": "your_name_0",
"fieldType": "text"
},
{
"fieldName": "Description",
"uniqueId": "description_1",
"fieldType": "textarea"
},
{
"fieldName": "Favorite Color",
"uniqueId": "favorite_color_2",
"fieldType": "radio"
"fieldTypeOptionsArray":[
{
"formFieldId":"favorite_color_2",
"optionId":"favorite_color_2_0",
"optionValue":"yellow"
},
{
"formFieldId":"favorite_color_2",
"optionId":"favorite_color_2_1",
"optionValue":"blue"
}
]
}
];
//values to bind to the model
$scope.output={
"your_name_0":"Bob",
"description_1":"I am a developer",
"favorite_color_2":
{
"optionValue":"yellow",
"formFieldId":"favorite_color_2",
"optionId":"favorite_color_2_0"
}
};
};
该指令:
myApp.directive("formField",function($compile){
var templates = {
textTemplate:'<div class="form-group"><label for="{{content.uniqueId}}" >{{content.fieldName}}</label><input type="text" ng-model="model" name="{{content.uniqueId}}" class="form-control" id="{{content.uniqueId}}"/> </div><br>',
textareaTemplate:'<div class="form-group"><label for="{{content.uniqueId}}" >{{content.fieldName}}</label> <textarea ng-model="model" name="{{content.uniqueId}}" id="{{content.uniqueId}}" class="form-control"></textarea> </div>',
radioTemplate : '<div class="form-group"><label>{{content.fieldName}}</label><div class=""><div class="radio" ng-repeat="option in content.fieldTypeOptionsArray"><label><input type="radio" name="{{content.uniqueId}}" ng-value="option" id="{{option.optionId}}" ng-model="$parent.model">{{option.optionValue}}</label></div></div></div>',
};
var getTemplate = function(content, attrs){
var template = {};
template = templates[content.fieldType+"Template"];
if(typeof template != 'undefined' && template != null) {
return template;
}
else {
return '';
}
};
var linker = function(scope, element, attrs){
element.html(getTemplate(scope.content, attrs)).show();
$compile(element.contents())(scope);
}
return {
restrict:"E",
replace:true,
link:linker,
scope:{
content:'=',
model:'=?'
}
};
});
下面是一个JSFIDLE:
我被困了一段时间,我无法理解问题的根源。它与它是嵌套对象或因为它在指令中有关。任何帮助都是有用的,如果您需要进一步澄清,请让我知道!谢谢 当我将ng值和ng模型更改为期权的值而不是整个期权对象时,似乎可以工作 前后:
<input type="radio" name="{{content.uniqueId}}" ng-value="option" id="{{option.optionId}}" ng-model="$parent.model" >
<input type="radio" name="{{content.uniqueId}}" ng-value="option.optionValue" id="{{option.optionId}}" ng-model="model.optionValue"
我找到了解决办法。我把这个添加到我的控制器上。如果我将$scope.output[favorite_color_2]映射到$scope.formFields中的等效值,它就会起作用。这背后的原因是ng repeat中的项只能映射到其父范围内的某个对象。在本例中,$scope.formFields
angular.forEach($scope.output, function(value,key){
for(var f=0;f<$scope.formFields.length;f++){
if(key == $scope.formFields[f].uniqueId){
if($scope.formFields[f].fieldType == 'radio'){
console.log($scope.formFields[f].fieldTypeOptionsArray.length);
for (var z=0;z<$scope.formFields[f].fieldTypeOptionsArray.length;z++){
if($scope.formFields[f].fieldTypeOptionsArray[z].optionValue == value.optionValue){
$scope.output[key]=$scope.formFields[f].fieldTypeOptionsArray[z];
}
}
}
}
}
});
更新的JSFIDLE:谢谢,我知道这一点,但不幸的是,我无法更改ng值和ng模型属性。我需要它在指向对象时工作。