我有一个带有多个标签的标签页,一旦点击就会调用服务来返回一些数据.其中一些数据返回html表单并且非常随机.我想收集输入的值,并通过服务将数据发送回服务器.我遇到的问题是我无法从动态创建的html中的输入元素中获取数据.
我创建了一个Plunker来展示问题所在.请注意,html值可以随时更改,因此硬编码html将无法正常工作.这里是来自plunker的代码,但请查看plunker以获得最佳视图.
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $sce, $compile) {
$scope.name = 'World';
$scope.html = "";
$scope.htmlElement = function(){
var html = "<input type='text' ng-model='html'></input>";
return $sce.trustAsHtml(html);
}
});
的index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div ng-bind-html="htmlElement()"></div>
{{html}}
</body>
</html>
随着angularjs和bootstrap 3的更改,我无法创建一个表单字段,只需将所需参数添加到输入字段,该项目将被红色突出显示.这是一个关于如何在我的系统上设置它并期望它工作的plunker.我似乎无法在bootstraps网站上找到关于所需的任何文档,这样如果有人能找到它会真的有帮助.
编辑:用以下评论意见替换以下所有内容......我仍然想要一个解决方案,我不需要编写任何CSS并使用Bootstrap 3.
我的表单字段如下所示:
<body ng-app>
<div ng-controller="Controller" class="container">
<form novalidate class="simple-form" name="myForm">
<div class="form-group col-sm-4">
Name: <input type="text" ng-model="name" name="name" class="form-control" required/>
E-mail: <input type="email" ng-model="email" name="email" class="form-control" required/>
<small class="error"
ng-show="myForm.email.$error.required">
Your name is required.
</small>
</div>
</form>
</div>
</body>
Script.js看起来像这样:
function Controller($scope) {
$scope.name = "Test";
$scope.email = "";
}
Style.css看起来像这样:
input.ng-invalid {
border: 1px solid red;
}
虽然这有效,但它用上面的css替换了bootstrap css.我更喜欢简单地添加一个元素,而不必重写css来添加色调和动画.