我记录

ionic 表单弹窗

掷鸡蛋者 发布于 2015/5/26 15:27 浏览: 3857 回复: 0 所在分类:ionic

1、创建模态窗口的模板。

步骤:必须在首页 index.html 中增加一个模板


<script id="new-task.html" type="text/ng-template">

<div class="modal">


<!-- 窗口标题和取消按钮 -->

<ion-header-bar class="bar-secondary">

     <h1 class="title">新任务</h1>

     <button class="button button-clear button-positive" ng-click="closeNewTask()">取消</button>

</ion-header-bar>


<!-- 窗口内容 -->

<ion-content>


<form ng-submit=“createTask(x)">

<div class="list">

     <label class="item item-input">

          <input type="text" placeholder="有哪些事情需要记录?" ng-model="x.title">

     </label>

</div>


<div class="padding">

     <button type="submit" class="button button-block button-positive">创建任务</button>

</div>

</form>


</ion-content>


</div>

</script>

2、在需要的地方,比如 header-bar 中增加按钮

<ion-header-bar class="bar-dark">


<h1 class="title">计划任务</h1>


<!-- 添加按钮 -->

<button class="button button-icon" ng-click="newTask()">

<i class="icon ion-compose"></i>

</button>

</ion-header-bar>

3、添加点击事件:显示模态窗口

因为首页 index.html 已有控制器TodoCtrl,所以只要在TodoCtrl中增加点击事件 newTask() 即可。

修改 js/app.js 文件

// 生成模态窗口

$ionicModal.fromTemplateUrl('new-task.html', function(modal) {

$scope.taskModal = modal; // 创建模态窗口 taskModal

}, {

scope: $scope,

animation: 'slide-in-up'

});


// 全局方法:打开窗口

$scope.newTask = function() {

     $scope.taskModal.show();

};


// 全局方法:关闭窗口

$scope.closeNewTask = function() {

     $scope.taskModal.hide();

};

注意:这里的 $ionicModal 模态参数是依赖注入得到的。

4、绑定提交按钮

还是在模态窗口中,代码如下:

<form ng-submit="createTask(task)">

<div class="list">

     <label class="item item-input">

          <input type="text" placeholder="有哪些事情需要记录?" ng-model="task.title">

     </label>

</div>


<div class="padding">

     <button type="submit" class="button button-block button-positive">创建任务</button>

</div>

</form>

在 form 的 ng-submit 中创建提交事件。

5、处理提交事件

在控制器中处理窗口的关闭:

// Called when the form is submitted

$scope.createTask = function(task) {

$scope.tasks.push({

     title: task.title

});

$scope.taskModal.hide();

task.title = "";

};

这段代码非常简单。 


掷鸡蛋者2015/5/26 15:27

留下脚印

踩一脚
copyright © 用微博记录这个时代 2010-2014
Powered by 我记录2.0
Processed in 0 seconds, 0 queries