简易自定义angular js
来源:互联网 发布:陶瓷软件免费版 编辑:程序博客网 时间:2024/06/04 01:10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="angular-1.3.0.js"></script>
<title>Note Book</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
li {
height: 24px;
line-height: 24px;
list-style: none;
}
main {
position: relative;
width: 512px;
margin: 0 auto;
}
div {
height: 48px;
line-height: 48px;
}
section {
width: 512px;
}
.ipt {
width: 388px;
margin: 0 auto;
}
.ipt input {
width: 320px;
height: 24px;
}
.btn {
width: 80px;
margin: 0 auto;
}
button {
width: 80px;
height: 24px;
}
.note_list {
width: 512px;
height: 384px;
border: 2px solid #999;
padding: 12px;
}
#toast {
position: absolute;
top: 256px;
left: 128px;
width: 160px;
height: 148px;
background-color: #fff;
border: 1px solid #999;
}
#toast h3 {
text-align: center;
}
#toast h5 {
text-align: center;
}
#toast button {
display: block;
margin: 16px auto;
}
</style>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.constant("tips", {
add_note_empty: ["请输入记录内容", "好吧"],
add_note_exists: ["您记录的内容已经存在", "好吧"],
search_empty: ["请输入搜索内容", "好吧"],
search_success: ["搜到相关内容", "很好"],
search_failure: ["未搜到相关内容", "失望"]
});
app.controller("myCtrl", function ($scope, tips) {
var tipsShow = function (tips) {
$scope.tips_message = tips[0];
$scope.tips_btn = tips[1];
$scope.tips_is_show = true;
console.log($scope.tips_message);
console.log($scope.tips_btn);
console.log($scope.tips_is_show);
};
var tipsHide = function () {
$scope.tips_is_show = false;
};
$scope.noteList = []; // 保存账本所有记录。
$scope.addNote = function () {
if ($scope.note == undefined) {
tipsShow(tips.add_note_empty);
return;
}
var note = $scope.note.trim();
if (note.length == 0) {
tipsShow(tips.add_note_empty);
return;
}
if ($scope.noteList.indexOf($scope.note) >= 0) {
tipsShow(tips.add_note_exists);
return;
}
$scope.noteList.push($scope.note);
$scope.note = "";
};
$scope.search = function () {
if ($scope.keyword == undefined || $scope.keyword.length == 0) {
tipsShow(tips.search_empty);
return;
}
if ($scope.noteList.indexOf($scope.keyword) >= 0) {
tipsShow(tips.search_success);
} else {
tipsShow(tips.search_failure);
}
};
$scope.tipsHide = function () {
tipsHide();
}
});
</script>
</head>
<body ng-app="myApp">
<main ng-controller="myCtrl">
<div>记账本</div>
<div class="note_list">
<ul>
<li ng-repeat="value in noteList">{{ value }}</li>
</ul>
</div>
<section>
<div class="ipt">输入框:<input type="text" size="48" ng-model="note"/></div>
</section>
<section>
<div class="btn">
<button ng-click="addNote()">记录</button>
</div>
</section>
<section>
<div class="ipt">搜索框:<input type="text" size="48" ng-model="keyword"/></div>
</section>
<section>
<div class="btn">
<button ng-click="search()">搜索</button>
</div>
</section>
<div id="toast" ng-if="tips_is_show">
<h3>提示</h3>
<h5>{{ tips_message }}</h5>
<button ng-click="tipsHide()">{{ tips_btn }}</button>
</div>
</main>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="angular-1.3.0.js"></script>
<title>Note Book</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
li {
height: 24px;
line-height: 24px;
list-style: none;
}
main {
position: relative;
width: 512px;
margin: 0 auto;
}
div {
height: 48px;
line-height: 48px;
}
section {
width: 512px;
}
.ipt {
width: 388px;
margin: 0 auto;
}
.ipt input {
width: 320px;
height: 24px;
}
.btn {
width: 80px;
margin: 0 auto;
}
button {
width: 80px;
height: 24px;
}
.note_list {
width: 512px;
height: 384px;
border: 2px solid #999;
padding: 12px;
}
#toast {
position: absolute;
top: 256px;
left: 128px;
width: 160px;
height: 148px;
background-color: #fff;
border: 1px solid #999;
}
#toast h3 {
text-align: center;
}
#toast h5 {
text-align: center;
}
#toast button {
display: block;
margin: 16px auto;
}
</style>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.constant("tips", {
add_note_empty: ["请输入记录内容", "好吧"],
add_note_exists: ["您记录的内容已经存在", "好吧"],
search_empty: ["请输入搜索内容", "好吧"],
search_success: ["搜到相关内容", "很好"],
search_failure: ["未搜到相关内容", "失望"]
});
app.controller("myCtrl", function ($scope, tips) {
var tipsShow = function (tips) {
$scope.tips_message = tips[0];
$scope.tips_btn = tips[1];
$scope.tips_is_show = true;
console.log($scope.tips_message);
console.log($scope.tips_btn);
console.log($scope.tips_is_show);
};
var tipsHide = function () {
$scope.tips_is_show = false;
};
$scope.noteList = []; // 保存账本所有记录。
$scope.addNote = function () {
if ($scope.note == undefined) {
tipsShow(tips.add_note_empty);
return;
}
var note = $scope.note.trim();
if (note.length == 0) {
tipsShow(tips.add_note_empty);
return;
}
if ($scope.noteList.indexOf($scope.note) >= 0) {
tipsShow(tips.add_note_exists);
return;
}
$scope.noteList.push($scope.note);
$scope.note = "";
};
$scope.search = function () {
if ($scope.keyword == undefined || $scope.keyword.length == 0) {
tipsShow(tips.search_empty);
return;
}
if ($scope.noteList.indexOf($scope.keyword) >= 0) {
tipsShow(tips.search_success);
} else {
tipsShow(tips.search_failure);
}
};
$scope.tipsHide = function () {
tipsHide();
}
});
</script>
</head>
<body ng-app="myApp">
<main ng-controller="myCtrl">
<div>记账本</div>
<div class="note_list">
<ul>
<li ng-repeat="value in noteList">{{ value }}</li>
</ul>
</div>
<section>
<div class="ipt">输入框:<input type="text" size="48" ng-model="note"/></div>
</section>
<section>
<div class="btn">
<button ng-click="addNote()">记录</button>
</div>
</section>
<section>
<div class="ipt">搜索框:<input type="text" size="48" ng-model="keyword"/></div>
</section>
<section>
<div class="btn">
<button ng-click="search()">搜索</button>
</div>
</section>
<div id="toast" ng-if="tips_is_show">
<h3>提示</h3>
<h5>{{ tips_message }}</h5>
<button ng-click="tipsHide()">{{ tips_btn }}</button>
</div>
</main>
</body>
</html>
阅读全文
1 0
- 简易自定义angular js
- angular js自定义指令
- angular.js自定义指令
- Angular.js简易信息发布系统!ngRoute路由配置
- angular.js 自定义过滤器去重
- js简易版自定义事件及其应用
- Angular JS
- Angular js
- Angular Js
- angular js
- Angular JS
- angular js
- Angular JS
- Angular JS
- angular.js
- angular JS
- angular js
- angular.js
- AndroidStudio能run但是报一堆红的解决方案
- 路由
- java算法(5)
- 亚马逊海外购德国馆上线了,这次什么值得买?
- java算法(6)
- 简易自定义angular js
- Java笔记(四)随机存取文件流RandomAccessFile
- java算法(7)
- 其他题目---折纸问题
- java算法(8)
- angularjs 题:(记账本 ,主要的是看里面的判断 for(或) if())
- 考研英语
- java算法(9)
- 欢迎使用CSDN-markdown编辑器