AngularJS动态操作列表
2016-02-27 00:00
483 查看
<!DOCTYPE html> <html lang="en" ng-app="todoList"> <head> <meta charset="UTF-8"> <title>todoList</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head> <body style="padding: 10px;" ng-controller="TaskCtrl"> <div class="input-group"> <input ng-model="task" type="text" class="form-control"/> <span class="input-group-btn"> <button class="btn btn-default" ng-click="add()">提交</button> </span> </div> <h4 ng-if="tasks.length>0">任务列表</h4> <ul class="list-group"> <li ng-repeat="item in tasks track by $index" class="list-group-item"> <!--track by $index按下标索引--> {{item}} <a id="aBtn" ng-click="tasks.splice($index,1)">删除</a> </li> </ul> </body> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/angular.min.js"></script> <script type="text/javascript"> angular.module('todoList',[]) .controller('TaskCtrl',function($scope){ $scope.task=""; /*对应input中的ng-model="task",也就是input中输入的值都会赋值给$scope.task*/ $scope.tasks=[]; /*对应li中的tasks,也就是ul中的li值输入的值都会通过{{item}}保存于$scope.tasks数组*/ $scope.add=function(){ $scope.tasks.push($scope.task); /*出发提交按钮中的ng-click="add()"事件*/ console.log("you click me"); } }); </script> </html>
复制以上代码,按照路径导入css和js即可使用。
注:本文章为本人学习笔记
相关文章推荐
- ionic angularJS input 相关指令 以及定时器 的使用
- 【AngularJS学习笔记】02 小杂烩及学习总结
- angular 的广义回调管理
- angular.injector
- angular.module
- angularJS实现聊天窗口中发送和接收信息时,将聊天记录窗口滑动条实时滑至底部
- angularjs radio
- angularJs 指令的用法
- angularjs onchange
- angularjs+bootstrap+ngDialog实现模式对话框
- AngularJS 基础点
- 探索angularjs+requirejs全面实现按需加载的套路
- [转]AngularJS 之 Factory vs Service vs Provider
- :angularjs学习总结(~~很详细的教程) 很不错的一篇帖子 适合快速了解angularjs整体结构 有个整体印象
- angularJs中图表功能-angular-flot
- angularJS项目开发需要下载安装和配置的环境
- angular-flot学习总结
- angular-flot学习总结
- 探索angularjs+requirejs全面实现按需加载的套路
- AngularJS 之 ngGrid