Angularjs 在 js 中绑定动态表单
Angularjs bind dynamic form bulit in js
我有一个表单,我想在 运行 时间通过 js 构建并在 angularjs 中的表单控制器中使用它。
正如您在下面的示例中看到的,它没有作为 html 抛出,我希望它绑定到 model
变量。 http://jsfiddle.net/g6m09eb7/
<div>
<form ng-controller="TodoCtrl" ng-submit="blabla()">
<div ng-repeat="field in fields">{{field.input}}</div>
</form>
</div>
function TodoCtrl($scope) {
$scope.model = {
'FirstName': 'Test',
'LastName': 'Test Last'
}
$scope.fields = [{
input: '<input type="text" ng-model="model.FirstName">'
}, {
input: '<input type="text" ng-model="model.LastName">'
}, ];
}
首先,为了提供信息,我将向您展示如何在您尝试完成这项工作时完成这项工作。这不是您应该用来解决整体问题的方法。这个例子会得到文档中的html,但是不会用Angular编译。为此,您必须有一个不同的指令,like this (click)。这是各种糟糕的做法。
angular.module('myApp', [])
.controller('TodoCtrl', function($scope) {
$scope.fields = [{
input: '<input type="text" ng-model="model.FirstName">'
}, {
input: '<input type="text" ng-model="model.LastName">'
}, ];
})
// filter to make Angular trust the html
.filter('safeHtml', ['$sce', function ($sce) {
return function (text) {
return $sce.trustAsHtml(text);
};
}])
;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form ng-app="myApp" ng-controller="TodoCtrl">
<!-- use ng-bind-html on trusted html to bind it (see the js) -->
<div ng-repeat="field in fields" ng-bind-html="field.input | safeHtml"></div>
</form>
相反,您可以自然地做到这一点。只需使用您对象的属性作为 ng-repeat
的标准。简单干净!
angular.module('myApp', [])
.controller('TodoCtrl', function($scope) {
$scope.model = {
'FirstName': 'Test',
'LastName': 'Test Last'
};
})
;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form ng-app="myApp" ng-controller="TodoCtrl">
<div ng-repeat="(key,value) in model">
<input type="text" ng-model="model[key]"/>
</div>
</form>
请务必避免让您的控制器受到 DOM 操纵。如果您在控制器中有 html 个片段,您的方法可能偏离轨道。 DOM 操作应完全通过指令完成。
我有一个表单,我想在 运行 时间通过 js 构建并在 angularjs 中的表单控制器中使用它。
正如您在下面的示例中看到的,它没有作为 html 抛出,我希望它绑定到 model
变量。 http://jsfiddle.net/g6m09eb7/
<div>
<form ng-controller="TodoCtrl" ng-submit="blabla()">
<div ng-repeat="field in fields">{{field.input}}</div>
</form>
</div>
function TodoCtrl($scope) {
$scope.model = {
'FirstName': 'Test',
'LastName': 'Test Last'
}
$scope.fields = [{
input: '<input type="text" ng-model="model.FirstName">'
}, {
input: '<input type="text" ng-model="model.LastName">'
}, ];
}
首先,为了提供信息,我将向您展示如何在您尝试完成这项工作时完成这项工作。这不是您应该用来解决整体问题的方法。这个例子会得到文档中的html,但是不会用Angular编译。为此,您必须有一个不同的指令,like this (click)。这是各种糟糕的做法。
angular.module('myApp', [])
.controller('TodoCtrl', function($scope) {
$scope.fields = [{
input: '<input type="text" ng-model="model.FirstName">'
}, {
input: '<input type="text" ng-model="model.LastName">'
}, ];
})
// filter to make Angular trust the html
.filter('safeHtml', ['$sce', function ($sce) {
return function (text) {
return $sce.trustAsHtml(text);
};
}])
;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form ng-app="myApp" ng-controller="TodoCtrl">
<!-- use ng-bind-html on trusted html to bind it (see the js) -->
<div ng-repeat="field in fields" ng-bind-html="field.input | safeHtml"></div>
</form>
相反,您可以自然地做到这一点。只需使用您对象的属性作为 ng-repeat
的标准。简单干净!
angular.module('myApp', [])
.controller('TodoCtrl', function($scope) {
$scope.model = {
'FirstName': 'Test',
'LastName': 'Test Last'
};
})
;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form ng-app="myApp" ng-controller="TodoCtrl">
<div ng-repeat="(key,value) in model">
<input type="text" ng-model="model[key]"/>
</div>
</form>
请务必避免让您的控制器受到 DOM 操纵。如果您在控制器中有 html 个片段,您的方法可能偏离轨道。 DOM 操作应完全通过指令完成。