ユーザーが動的なフォームを作成できるAngularアプリを作成しようとしています。このユーザーでは、フォームフィールドを作成し、フォームメタデータを保存できます。これは、実際のフォームを表示するために使用されます。ディレクティブを使用して要素を作成するライブプレビューがあります。
私はAngularを初めて使用するため、バインディングが機能しない理由と、それを機能させるために必要な変更を理解できません。ここで必要なのは、上記のデータが変更されるとすぐにライブプレビューセクションが更新されることです。たとえば、タイプをテキストからパスワードに変更すると、ライブプレビューの入力ボックスはパスワードタイプになります。次のコードは、メインアプリからのスニペットです。残念ながら、Angularバージョンを変更することはできません。
HTML
<form ng-submit="">
<div ng-repeat="tagfield in tagfields">
<dynamic-form dataobject="tagfield"></dynamic-form>
</div>
<button type="reset">Reset</button>
<button type="submit">Submit</button>
</form>
脚本
app.directive('dynamicForm', [ '$rootScope', function($rootScope){
return{
restrict: 'E',
scope: {
dataObject:'=dataobject'
},
link: function(scope, element, attrs){
element.append(
'Sample directive ' + scope.dataObject.selectmodel
+ '<input type='+scope.selectmodel+'
ng-model='+scope.dataObject.idmodel+'>'
);
}
}
}]);
plunkerの詳細なコード
プランカーで以下のコードを試してみて、それが機能するかどうか教えてください
app.directive('dynamicForm', [ '$compile', function($compile){
return{
restrict: 'E',
scope: {
dataObject:'=dataobject'
},
link: function(scope, element, attrs){
var el ="Sample directive <span>" + scope.dataObject.selectmodel
+ "</span><input type="+scope.dataObject.selectmodel+ "ng-value="+scope.dataObject.idmodel+"/>";
element.append(el);
scope.$watch('dataObject.selectmodel',function(newvalue,oldvalue){
if(oldvalue !=newvalue)
addelement(newvalue);
},true)
function addelement(valuedata)
{
element.children().remove()
var el ="Sample directive <span>" + scope.dataObject.selectmodel
+ "<span>"+"<input type='"+valuedata+ "'ng-value='"+scope.dataObject.idmodel+"'/>'";
element.append($compile(el)(scope));
}
}
}
}]);
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加