网络获取anjular js

最新推荐文章于 2024-11-14 23:57:37 发布
最新推荐文章于 2024-11-14 23:57:37 发布
阅读量490 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： 混合开发CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/shitou0/article/details/79105145
本文介绍了一个使用 AngularJS 实现的基本用户管理系统。该系统包括用户数据的展示、添加、修改和删除等功能，并且提供了年龄及 ID 排序、按姓名过滤的功能。通过此示例，读者可以了解到如何运用 AngularJS 控制器、指令和服务来实现常见的 CRUD 操作。
  
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8" />
 <title></title>
 <style>
 .tr{
 background: #CCCCCC;
 }
 .trtr:nth-child(2n){
 background: white;
 }
 .trtr:nth-child(2n-1){
 background: #6699CC;
 }
 .th{
 background: #CCCCCC;
 }
 </style>
 <script src="js/angular.min.js"></script>
 <script src="js/jquery-1.8.2.min.js"></script>
 <script>
 angular.module("App",[]).controller("demoC",function($scope){
 $scope.users = [{id:1,name:"张三",age:21,sex:"男",tel:18611111111,hobby:"只爱学习"},
 {id:2,name:"李四",age:21,sex:"男",tel:13311111111,hobby:"独自学习"},
 {id:3,name:"小花",age:19,sex:"女",tel:12211111111,hobby:"听着歌学习"},
 {id:4,name:"翠花",age:25,sex:"女",tel:16611111111,hobby:"看书学习"},
 {id:5,name:"小风",age:22,sex:"男",tel:17711111111,hobby:"去图书馆看书"}];
 $scope.flag = false;
 $scope.flag2 = false;
 $scope.f1 = false;
 $scope.f2 = false;
 $scope.f3 = false;
 $scope.f4 = false;
 $scope.f5 = false;
 $scope.f6 = false;
 //添加保存操作
 $scope.save = function(){
 var id = $scope.idadd;
 var name = $scope.nameadd;
 var age = $scope.ageadd;
 var sex = $scope.sexadd;
 var tel = $scope.teladd;
 var hobby = $scope.hobbyadd;
 //判断ID
 if (id==undefined||id=="") {
 $(".id").css("border-color","red");
 }else{
 $(".id").css("border-color","");
 $scope.f1 = true;
 }
 //判断姓名
 if (name==undefined||name=="") {
 $(".name").css("border-color","red");
 }else{
 $(".name").css("border-color","");
 $scope.f2 = true;
 }
 //判断年龄
 if (age==undefined||age=="") {
 $(".age").css("border-color","red");
 }else{
 $(".age").css("border-color","");
 $scope.f3 = true;
 }
 //判断性别
 if ($scope.f1&&$scope.f2&&$scope.f3) {
 $scope.f4=true;
 $(".sexxx").text("");
 }else{
 $(".sexxx").css("color","red");
 }
 //判断联系方式
 if (tel==undefined||tel=="") {
 $(".tel").css("border-color","red");
 }else{
 $(".tel").css("border-color","");
 $scope.f5 = true;
 }
 //判断爱好
 if (hobby==undefined||hobby=="") {
 $(".hobby").css("border-color","red");
 }else{
 $(".hobby").css("border-color","");
 $scope.f6 = true;
 }
 if ($scope.f1&&$scope.f2&&$scope.f3&&$scope.f4&&$scope.f5&&$scope.f6) {
 $scope.users.push({id:id,name:name,age:age,sex:sex,tel:tel,hobby:hobby});
 $scope.idadd = "";
 $scope.nameadd = "";
 $scope.ageadd = "";
 $scope.teladd = "";
 $scope.sexadd = "";
 $scope.hobbyadd = "";
 $scope.flag = false;
 }
 }
 //修改
 $scope.upd = function(i){
 $scope.flag2 = true;
 $scope.flag = false;
 $scope.dx = $scope.users[i];
 $scope.idup = $scope.dx.id
 $scope.nameup = $scope.dx.name;
 $scope.ageup = $scope.dx.age;
 $scope.telup = $scope.dx.tel;
 $scope.sexup = $scope.dx.sex;
 $scope.hobbyup = $scope.dx.hobby;
 }
 $scope.updata = function(){
  
 var id = $scope.idup;
 var name = $scope.nameup;
 var age = $scope.ageup;
 var sex = $scope.sexup;
 var tel = $scope.telup;
 var hobby = $scope.hobbyup;
 //判断ID
 if (id==undefined||id=="") {
 $(".idup").css("border-color","red");
 }else{
 $(".idup").css("border-color","");
 $scope.f1 = true;
 }
 //判断姓名
 if (name==undefined||name=="") {
 $(".nameup").css("border-color","red");
 }else{
 $(".nameup").css("border-color","");
 $scope.f2 = true;
 }
 //判断年龄
 if (age==undefined||age=="") {
 $(".ageup").css("border-color","red");
 }else{
 $(".ageup").css("border-color","");
 $scope.f3 = true;
 }
 //判断性别
 if ($scope.f1&&$scope.f2&&$scope.f3) {
 $scope.f4=true;
 $(".sexxxup").text("");
 }else{
 $(".sexxxup").css("color","red");
 }
 //判断联系方式
 if (tel==undefined||tel=="") {
 $(".telup").css("border-color","red");
 }else{
 $(".telup").css("border-color","");
 $scope.f5 = true;
 }
 //判断爱好
 if (hobby==undefined||hobby=="") {
 $(".hobbyup").css("border-color","red");
 }else{
 $(".hobbyup").css("border-color","");
 $scope.f6 = true;
 }
 if ($scope.f1&&$scope.f2&&$scope.f3&&$scope.f4&&$scope.f5&&$scope.f6) {
 $scope.dx.id = $scope.idup;
 $scope.dx.name = $scope.nameup;
 $scope.dx.age = $scope.ageup;
 $scope.dx.tel = $scope.telup;
 $scope.dx.sex = $scope.sexup;
 $scope.dx.hobby = $scope.hobbyup;
  
  
 $scope.idup = "";
 $scope.nameup = "";
 $scope.ageup = "";
 $scope.telup = "";
 $scope.sexup = "";
 $scope.hobbyup = "";
 $scope.flag2 = false;
 }
  
 }
 $scope.cler = function(){
 var id = $scope.idadd;
 var name = $scope.nameadd;
 var age = $scope.ageadd;
 var sex = $scope.sexadd;
 var tel = $scope.teladd;
 var hobby = $scope.hobbyadd;
 $scope.idadd = "";
 $scope.nameadd = "";
 $scope.ageadd = "";
 $scope.teladd = "";
 $scope.sexadd = "";
 $scope.hobbyadd = "";
 }
 $scope.cler2 = function(){
 var id = $scope.idup;
 var name = $scope.nameup;
 var age = $scope.ageup;
 var sex = $scope.sexup;
 var tel = $scope.telup;
 var hobby = $scope.hobbyup;
 $scope.idup = "";
 $scope.nameup = "";
 $scope.ageup = "";
 $scope.telup = "";
 $scope.sexup = "";
 $scope.hobbyup = "";
 }
 //删除
 $scope.dele = function(i){
 $scope.users.splice(i,1);
 alert("已删除")
 }
 //按照姓名查询
 $scope.chaname = function(){
 var name = $scope.selname;
 if (name==undefined||name=="") {
  
 }else{
 $scope.selname2 = $scope.selname;
 }
 }
 $scope.add = function(){
 $scope.flag = true;
 $scope.flag2 = false;
 }
 })
 </script>
 </head>
 <body ng-app="App" ng-controller="demoC">
 <div style="width: 1200px; height: auto; margin: 0 auto;">
 年龄排序：<select ng-model="agepai" style="width: 130px;">
 <option value="" checked = "">请选择</option>
 <option value="+age">正序</option>
 <option value="-age">倒序</option>
 </select>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id排序：<selectng-model="idpai"style="width: 130px;">
 <option value="" checked = "">请选择</option>
 <option value="+id">正序</option>
 <option value="-id">倒序</option>
 </select>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;姓名：<inputtype="text"ng-model="selname" />
 <button ng-click="chaname()">按照姓名查询</button>
 <button ng-click="add()" style="margin-left: 120px;">添加新用户</button>
  
 <table style="width: 1000px;height: auto;"border="1px"cellspacing="0">
 <tr class="tr">
 <th>id</th>
 <th>姓名</th>
 <th>年龄</th>
 <th>性别</th>
 <th>联系方式</th>
 <th>爱好</th>
 <th class="th">操作</th>
 </tr>
 <tr ng-repeat="n in users|orderBy:agepai|orderBy:idpai|filter:{name:selname2}"class="trtr">
 <td align="center">{{n.id}}</td>
 <td align="center">{{n.name}}</td>
 <td align="center">{{n.age}}</td>
 <td align="center">{{n.sex}}</td>
 <td align="center">{{n.tel}}</td>
 <td align="center">{{n.hobby}}</td>
 <td align="center"><ahref="#"ng-click="upd($index)"style="color: red;">修改</a>&nbsp;<ahref="#"ng-click="dele($index)"style="color: red;">删除</a></td>
 </tr>
 </table>
  
 <div ng-show="flag">
  
 <form>
  
 添加用户
 <table>
 <tr>
 <td align="center">id:</td>
 <td><inputtype="text"ng-model="idadd"class="id"/></td>
 </tr>
 <tr>
 <td align="center">姓名:</td>
 <td><inputtype="text"ng-model="nameadd"class="name"/></td>
 </tr>
 <tr>
 <td align="center">年龄:</td>
 <td><inputtype="text"ng-model="ageadd"class="age"/></td>
 </tr>
 <tr>
 <td align="center">性别:</td>
 <td><selectng-model="sexadd">
 <option value="" checked = "">请选择</option>
 <option value="男">男</option>
 <option value="女">女</option>
 </select><spanclass="sexxx"></span></td>
 </tr>
 <tr>
 <td align="center">联系方式:</td>
 <td><inputtype="text"ng-model="teladd"class="tel"/></td>
 </tr><tr>
 <td align="center">爱好:</td>
 <td><inputtype="text"ng-model="hobbyadd"class="hobby"style="width: auto;height: 50px;"/></td>
 </tr>
 <tr>
 <td><buttonstyle="margin: 30px;"ng-click="save()">添加</button></td>
 <td><buttonstyle="margin: 30px;"ng-click="cler()">清空</button></td>
 </tr>
 </table>
 </form>
 </div>
  
  
 <div ng-show="flag2">
  
 <form>
 修改用户
 <table>
 <tr>
 <td align="center">id:</td>
 <td><inputtype="text"ng-model="idup"class="idup"/></td>
 </tr>
 <tr>
 <td align="center">姓名:</td>
 <td><inputtype="text"ng-model="nameup"class="nameup"/></td>
 </tr>
 <tr>
 <td align="center">年龄:</td>
 <td><inputtype="text"ng-model="ageup"class="ageup"/></td>
 </tr>
 <tr>
 <td align="center">性别:</td>
 <td><selectng-model="sexup">
 <option value="" checked = "">请选择</option>
 <option value="男">男</option>
 <option value="女">女</option>
 </select><spanclass="sexxxup"></span></td>
 </tr>
 <tr>
 <td align="center">联系方式:</td>
 <td><inputtype="text"ng-model="telup"class="telup"/></td>
 </tr><tr>
 <td align="center">爱好:</td>
 <td><inputtype="text"ng-model="hobbyup"class="hobbyup"style="width: auto;height: 50px;"/></td>
 </tr>
 <tr>
 <td><buttonstyle="margin: 30px;"ng-click="updata()">修改</button></td>
 <td><buttonstyle="margin: 30px;"ng-click="cler2()">清空</button></td>
 </tr>
 </table>
 </form>
 </div>
 </div>
  
 </body>
 </html>
 
I_do_
关注
前端使用Angular.js实现实时数据更新
AI架构全栈开发实战笔记
04-15 720
本指南旨在为前端开发者提供在Angular.js（1.x版本）中实现高效实时数据更新的完整解决方案。覆盖从基础数据绑定到复杂WebSocket集成的全链路实现，重点解决实时场景下的性能瓶颈和用户体验优化问题。文章按技术演进路线编排，从传统轮询到现代WebSocket方案逐层深入。每个技术方案均包含数学模型、代码实现和性能对比。脏检查（Dirty Checking）: Angular.js通过对比数据对象新旧值的变化来触发视图更新: Angular.js的核心事件循环机制，负责协调数据变更与DOM更新。
Erlang 打开和关闭SMP选项之差异观察
收藏夹+记事本
12-13 6939
##以下观察是基于版本otp_19.1 #打开SMP选项，Erlang进程会启动两倍于关闭SMP选项的进程， 打开SMP是22个线程，关闭SMP是11个进程. 1. 启动erl with SMP enabled (erl -smp enable) 2. 找到进程beam.smp的进程ID 3. 查看改进程包括的所有线程 484: ~/erlang/test  >
sae上报错，删除/xml-apis*.jar可解决，网上都说增加 seXXX.jar包，增加只会报新的错误
sdbzwangdongdong的专栏
01-27 2823
[17/Aug/2014:23:43:05 +0800] JAVA_SAE_Fatal_error: Context initialization failedorg.springframework.beans.factory.BeanDefinitionStoreException: Unexpected exception parsing XML document from ServletCo
Field XXX in XXXX required a bean of type XXXX that could not be found
热门推荐
weixin_34288121的博客
05-02 2万+
2019独角兽企业重金招聘Python工程师标准>>> ...
warning C4150: 删除指向不完整“CBasexxx”类型的指针；没有调用析构函数
zzw315的专栏
11-22 1万+
warning C4150 删除指向不完整“”类型的指针；没有调用析构函数，内存泄露
小计之fse
weixin_45312249的博客
04-02 1980
fseXxxDef.h #ifndef __FSE_XXX_PROC_H__ #define __FSE_XXX_PROC_H__ #include "ConfStruct_2.h" #include "fseXxxDef.h" #include "httpuafunc.h" #include "httpuasrvfunc.h" #include "osipparser2/osip_md5.h" #include "ConfSQLApi.h" #ifdef __cplusplus extern ".
eclpsexxx
liudong200618的博客
10-04 960
Copyright?Guidelines。
Webstore:一个基于 anjular-js 的网上商店，用于在线展示和销售产品
07-10
AngularJS，作为Google维护的JavaScript框架，以其强大的数据绑定和依赖注入特性，使得Webstore在构建动态单页应用（SPA）时能够实现高效的交互和流畅的用户体验。 首先，我们要理解AngularJS的核心概念。AngularJS...
Anjular5一个很牛的demo，很全
04-11
通过“Anjular5一个很牛的demo”的cc-master文件，你可以看到如何将这些概念应用到实际项目中，例如如何设置项目结构、配置模块、编写组件、实现数据绑定和路由、创建服务以及使用HttpClient进行网络请求等。...
anjular directive
最新发布
03-18
// 实际应从服务获取[^3] if (role === userRole && !this.hasView) { this.vc.createEmbeddedView(this.templateRef); this.hasView = true; } else { this.vc.clear(); this.hasView = false; } } ...
Angular.js基础学习之初始化
12-29
通过绑定来进行angular的初始化，会把js代码侵入到html中。 ng-app是angular的一个指令，代表一个angular应用（也叫模块）。使用ng-app或ng-app=来标记一个DOM结点，让框架会自动加载。也就是说，ng-app是可以带属性...
JAVA面向对象及高级特性
weixin_43458455的博客
08-09 809
一些概念(应该会的)：什么是对象、类(属性、方法)、 a) 对象：万物皆对象 b) 类：对象的集合 i. 普通类 属性：访问修饰符(public private 默认 protected) 类 包 子类 其他 private √ 默认修饰符 √ √ protected √ √ √ public √ √ √ √ 方法 a) 构造方法（这也是构造方法的重载） i. 带参构造 格式：访...
字符串转换为数字---使用java7的装箱功能
diezhai4249的博客
03-07 443
以前转换只知道使用Xxx.prasexxx方法，原来，还可以直接装箱自动转换。 //String类型字符串 String intStr = "123"; int str2int1 = new Integer(intStr); int str2int2 = Integer.parseInt(intStr); 以上两种方式都是可以的。 转载于:https://www.cnblog...
CMakeLists 一回生二回熟
勿以恶小而为之，勿以善小而不为
12-18 8452
最近又写了一些cmakelists 文件，对cmake使用更加顺手啦。 多项目时，总的CMakelists file following： # CMAKE verison cmake_minimum_required(VERSION 3.0.0) # Project name project(xxxgame) ### Created The Build Output Directory set...
修改注册表
weixin_33757911的博客
12-30 906
Editor Version 5.00 [HKEY_CLASSES_ROOT\exefile\shell\open\command] @="\"%1\" %*" 不显示共享文档和用户文档 Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion...
javaday13-StringBuffer.数组
First 007的博客
12-03 4289
13.01_常见对象(StringBuffer类的概述) A:StringBuffer类概述 通过JDK提供的API，查看StringBuffer类的说明 线程安全的可变字符序列 B:StringBuffer和String的区别 String是一个不可变的字符序列 StringBuffer是一个可变的字符序列 13.02_常见对象(StringBuffer类的构造方法) A:StringBu
GEO上所有数据集数据的下载和提取的最详细教程，代做分析和辅导
qq_40073899的博客
11-14 6860
NCBI GEO数据库（Gene Expression Omnibus）是一个全球最大的生物医学领域的公共数据库平台，用于存储基因组学数据，包括基因表达数据、染色质状态和基因组变异等。研究人员可以在该平台上查找、下载和分析各种基因表达数据集，以便进行生物信息学和生物医学研究。NCBI GEO数据库提供了丰富的数据资源和分析工具，是生命科学领域的重要研究工具之一。大量生物医学领域发表的论文使用的公共数据集也一般是来自GEO数据库的数据集。：表示一个或多个实验的数据集，通常包含多个样本。
关于几款系统恢复常用工具的用法介绍
weixin_34390105的博客
11-27 885
关于几款系统恢复常用工具的用法介绍 一. Unlocker 相信很多人都用过这东西吧，虽然说对于一些强悍的东东能力有限，但是删除大部分的无赖文件效果还是不错的。 二 Process Explorer 这是一款增强型的任务管理器，你可以使用它方便地管理你的程序进程，能强行关闭任何程序(包括系统级别的不允许随便终止的“顽固”进程)（我试没敢试过）。除此之外，它...
黑马程序员——String类和基本数据类型对象包装类
yykobe123的专栏
06-19 403
-----------------ASP.Net+Unity开发、.Net培训、期待与您交流！ -----------------
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值