angular做出提示框,获取输入的数据展示到界面上,判断数据是否存在,查询数据
2017-10-17 19:40
447 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="angular-1.3.0.js"></script> <title>Title</title> <style type="text/css"> main { position: relative; width: 512px; margin: 0 auto; } li { list-style: none; } input{ width: 320px; height: 24px; } button { width: 80px; height: 24px; } div{ margin: 16px auto; } .note_list { width: 496px; height: 396px; margin: 0 auto; padding: 6px; border: 2px solid #999; } .ipt { width: 388px; } .btn { width: 80px; } #dialog { width: 160px; height: 160px; position: absolute; top: 160px; left: 176px; margin: 0 auto; border: 1px solid #999; } #dialog h3, h5 { margin: 16px 0; text-align: center; } #dialog button { display: block; margin: 32px auto; } </style> <script type="text/javascript"> var app = angular.module("nbApp",[]); app.constant("tips", { add_note_empty: { msg: "请输入记录内容", btnTips: "好吧" }, add_note_exists: { msg: "您记录的内容已经存在", btnTips: "好吧" }, search_empty: { msg: "请输入搜索内容", btnTips: "好吧" }, search_success: { msg: "搜到相关内容", btnTips: "很好" }, search_failure: { msg: "未搜到相关内容", btnTips: "失望" } }); app.controller("nbCtrl",function ($scope,tips) { var dialogShow = function (tips) { $scope.dialog_message = tips.msg; $scope.dialog_btn_tips = tips.btnTips; $scope.dialog_is_show = true; }; $scope.dialogHide = function () { $scope.dialog_is_show = false; }; $scope.noteList = []; $scope.addNote = function () { if ($scope.note == undefined) { dialogShow(tips.add_note_empty); return; } var note = $scope.note.trim(); if (note.length == 0) { dialogShow(tips.add_note_empty); return; } if ($scope.noteList.indexOf(note) >= 0) { dialogShow(tips.add_note_exists); return; } $scope.noteList.unshift(note); $scope.note = ""; }; $scope.search = function () { if ($scope.keyword == undefined) { dialogShow(tips.search_empty); return; } var keyword = $scope.keyword.trim(); if (keyword.length == 0) { dialogShow(tips.search_empty); return; } if ($scope.noteList.indexOf(keyword) >= 0) { dialogShow(tips.search_success); } else { dialogShow(tips.search_failure); } }; }) </script> </head> <body ng-app="nbApp"> <main ng-controller="nbCtrl"> <div>记账本</div> <div class="note_list"> <ul> <li ng-repeat="value in noteList">{{ value }}</li> </ul> </div> <div class="ipt"> 输入框<input type="text" ng-model="note"/> </div> <div class="btn"> <button ng-click="addNote()">记录</button> </div> <div class="ipt"> 搜索框<input type="text" ng-model="keyword"/> </div> <div class="btn"> <button ng-click="search()">查询</button> </div> <div id="dialog" ng-if="dialog_is_show"> <h3>提示</h3> <h5>{{ dialog_message }}</h5> <button ng-click="dialogHide()">{{ dialog_btn_tips }}</button> </div> </main> </body> </html>
相关文章推荐
- 产生不同随机数,输入数据用折半查找判断数据是否存在。
- 提示用户通过键盘输入一个用户名,来判断这个用户是否存在,如果存在就显示一下用户默认的shell
- WPF 登陆界面判断输入的用户名和密码是否与数据库中保存的数据相同
- laravel查询数据库,对反馈回来的object类型,判断是否存在数据
- Android 判断SD卡是否存在及容量查询 分类: Android数据存储 2014-06-20 13:32 66人阅读 评论(0) 收藏
- ajax鼠标输入时立即判断文本框值是否存在,存在则提示并阻止提交。
- 提示用户输入一个用户名,判断是否存在,如果存在显示该用户的shell
- 当获取相似数据时,使用不同方法调用不同sp,但是使用同一个方法去用IIDataReader或者SqlDataReader读取数据时需要判断column name是否存在。
- 升级dedecms5.5后,出现"提示保存目录数据时失败,请检查你的输入资料是否存在问题"
- [Android] Android 判断SD卡是否存在及容量查询
- C++ 如何一次性获取用户输入并判断是否为数字?
- 判断表是否存在或表是否有数据的sql语句
- 判断SD卡是否存在及获取手机与SD卡总容量和剩余容量
- SQL数据是否存在(是否有数据)判断,表,存储过程是否存在
- mysql判断查询的字段的数据是否包含指定的字符串
- HQL 查询数据 (获取页面输入的查询条件字段)
- android 获取路径目录方法以及判断目录是否存在,创建目录
- mybaits判断要查询的表是否存在
- 在web中判断是否有app,没有则跳转,包括读取a标签参数,获取后台数据
- JS中如何判断传过来的JSON数据中是否存在某字段