通过javascript

Question

我正在尝试使用javascript和Angular材料动态创建表单。元素是正确创建的，但UI与HTML页面中创建的元素不匹配。

以下是为元素生成HTML标记的代码：

$scope.elements = [{
    label: "username",
    value: "test"
}, {
    label: "password",
    value: "test"
}];

$scope.fields = [];
for (var f = 0; f < $scope.elements.length; f++) {
    var e = $scope.elements[f];
    var label = "<label>" + e.label + ": * </label>";
    var input = "<input id='test_" + f + "' value='" + e.value + "'/>";
    var tmp = label.concat(input);
    $scope.fields.push($sce.trustAsHtml(tmp));
}

我使用$scope.fields将ng-bind-html绑定到HTML。

 <md-input-container ng-repeat="field in fields" ng-bind-html="field" >
 </md-input-container>

是否有任何我缺少或应添加的内容，以便拥有与静态HTML生成的相同的UI视图。

这是一个JSFiddle链接，它重现了上面提到的行为：https://jsfiddle.net/prerak6962/fxwmda5w/6/