当“新项目”单击时,我正在尝试动态添加输入表单.但不知道如何在js部分编写代码.任何想法？
这是我的代码：
@H_404_3@<!doctype html> <html ng-app> <head> <title>Angular - My Notes</title> <link rel="stylesheet" type="text/css" href="css/index.css"> <body> <h1>My Notes</h1> <div ng-controller="Note"> <input type="text" placeholder="Question"> <input ng-class="{'blockInput': !inlineChecked}" type="text" placeholder="enter text..."> <input type="checkBox" name="check" value="inline" ng-model="inlineChecked"> Inline <br> <button ng-click="add()">New Item</button> </div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script> <script type="text/javascript"> var Note = function($scope){ // create a variable contain new input forms?? } </script> </body> </html>
使用数组和ngRepeat …
@H_404_3@<!doctype html>
<html ng-app>
<head>
<title>Angular - My Notes</title>
<body>
<h1>My Notes</h1>
<div ng-controller="Note">
<div ng-repeat="item in items">
<input type="text" placeholder="{{item.questionPlaceholder}}" ng-model="item.question">
<input ng-class="{'blockInput': !item.inlineChecked}" type="text" placeholder="enter text..." ng-model="item.text">
<input type="checkBox" name="check" value="inline" ng-model="item.inlineChecked"> Inline
</div>
<button ng-click="add()">New Item</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script type="text/javascript">
var Note = function($scope){
$scope.items = [];
$scope.add = function () {
$scope.items.push({
inlineChecked: false,question: "",questionPlaceholder: "foo",text: ""
});
};
}
</script>
</body>
</html>
