angular实现内容追加
来源:互联网 发布:iphone铃声制作软件 编辑:程序博客网 时间:2024/06/05 07:52
一.使用angular实现如下效果
若记录的内容已存在或搜索不到相关内容是会有弹框提示
二.实现此案例的代码如下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script type="text/javascript" src="angular-1.3.0.js"></script> <title>记账本</title> <style type="text/css"> * { margin: 0; padding: 0; } li { list-style: none; } input { width: 320px; height: 24px; } button { width: 80px; height: 24px; } div { margin: 16px auto; } main { position: relative; width: 512px; margin: 0 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>
阅读全文
0 0
- angular实现内容追加
- angular 追加文本框输入的内容
- java实现文件内容追加
- angular+表格追加
- HTML angular追加内容,并进行判断原先是否存在和是否存在敏感字符
- angular追加元素和搜索
- 原生js实现给指定元素的后面追加内容
- Python脚本之批量实现文件内容追加
- CStdioFile 追加文件内容
- java追加文件内容
- 追加文件内容
- HDFS内容追加
- 给pdf追加内容
- poi追加内容
- python 追加excel内容
- jquery追加内容append
- file_put_contents 追加内容
- excel 追加内容
- JAVAC 运行报错‘javac’不是内部或外部命令,也不是可运行的程序或批处理文件
- 史上最全的架构师图谱
- 【CodeForces
- CPU状态信息us,sy,ni,id,wa,hi,si,st含义
- “核弹”之父——黄仁勋
- angular实现内容追加
- 在linux上发布更新的项目
- C++ GUI Programming with Qt4 Second Edition 之 附录A.1 许可协议说明
- QT模态窗口的设置
- 经典SQL语句大全
- svn主干删除build.sh重新提交报错“处于冲突状态;请在新增之前标记冲突为已经解决”
- Time、 Date类及其子类
- 基于Mybatis的增删改查
- BootStrap(三)模态框