Chinaunix首页 | 论坛 | 博客

甜心183的ChinaUnix博客

首页　| 　博文目录　| 　关于我

甜心183

  • 博客访问： 108936
  • 博文数量： 40
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 423
  • 用 户 组： 普通用户
  • 注册时间： 2013-01-15 11:55
文章分类

全部博文（40）

文章存档

2016年（36）

2015年（2）

2013年（2）

我的朋友
最近访客
推荐博文
angular js 备忘录

分类： JavaScript

2016-03-12 12:02:08

angularjs写备忘录的添加和删除功能

点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html>
  3. <script src= ""></script>
  4. <body ng-app="myApp" ng-controller="todoCtrl">
  5. <h2>我的备忘录</h2>
  6. <form ng-submit="todoAdd()">
  7.     <input type="text" ng-model="todoInput" size="50" placeholder="新增">
  8.     <input type="submit" value="新增">
  9. </form>
  10. <br>
  11. <div ng-repeat="x in todoList">
  12.     <input type="checkbox" ng-model="x.done"> <span ng-bind="x.todoText"></span>
  13. </div>
  14. <p><button ng-click="remove()">删除记录</button></p>
  15. <script>
  16. var app = angular.module('myApp', []);
  17. app.controller('todoCtrl', function($scope) {
  18.     $scope.todoList = [{todoText:'Clean House', done:false}];

  20.     $scope.todoAdd = function() {
  21.         $scope.todoList.push({todoText:$scope.todoInput, done:false});
  22.         $scope.todoInput = "";
  23.     };
  24.     $scope.remove = function() {
  25.         var oldList = $scope.todoList;
  26.         $scope.todoList = [];
  27.         angular.forEach(oldList, function(x) {
  28.             if (!x.done) $scope.todoList.push(x);
  29.         });
  30.     };
  31. });
  32. </script>
  33. </body>
  34. </html>

阅读(698) | 评论(0) | 转发(0) |
0

上一篇：jquery的ajaxdemo

下一篇：jquery实现搜索框提示下拉功能

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6