ionic 实现新增列表

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/fjh19950514/article/details/80472305

首先，新建一个按钮。

       <!-- 新增按钮 -->
        <button class="button button-icon" ng-click="newTask()">
          <i class="icon ion-compose"></i>
        </button>
      </ion-header-bar>
      <ion-content scroll="false">
        <ion-list>
          <ion-item ng-repeat="task in activeProject.tasks">
            {{task.title}}
          </ion-item>
        </ion-list>
      </ion-content>

页面为

  <!--  新增页面 -->
    <script id="new-task.html" type="text/ng-template">

      <div class="modal">

        <!-- Modal header bar -->
        <ion-header-bar class="bar-secondary">
          <h1 class="title">New Task</h1>
          <button class="button button-clear button-positive" ng-click="closeNewTask()">Cancel</button>
        </ion-header-bar>

        <!-- Modal content area -->
        <ion-content>

          <form ng-submit="createTask(task)">
            <div class="list">
              <label class="item item-input">
                <input type="text" placeholder="What do you need to do?" ng-model="task.title">
              </label>
            </div>
            <div class="padding">
              <button type="submit" class="button button-block button-positive">Create Task</button>
            </div>
          </form>

        </ion-content>

      </div>

    </script>
    <script src="http://www.runoob.com/static/ionic/js/app2.js"></script>
    <script src="cordova.js"></script>

最后，运行的结果为

大功告成!