angularjs – 如何动态添加输入表单？

发布时间：2020-12-17 07:39:50 所属栏目：安全来源：网络整理

导读：当“新项目”单击时,我正在尝试动态添加输入表单.但不知道如何在js部分编写代码.任何想法？这是我的代码： !doctype htmlhtml ng-app head titleAngular - My Notes/title link rel="stylesheet" type="text/css" href="css/index.css" body h1My Notes/h1

当“新项目”单击时,我正在尝试动态添加输入表单.但不知道如何在js部分编写代码.任何想法？

这是我的代码：

<!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 …

<!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>

JsBin … http://jsbin.com/fusapojo/4/edit?html,output

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!