【angularjs】新增编辑利用同一页面

最新推荐文章于 2022-08-25 16:44:57 发布
最新推荐文章于 2022-08-25 16:44:57 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： =====前端===== Angularjs前端 文章标签： angularjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jing875480512/article/details/84973001
版权

情景：

  在该页面中，新增和编辑页面差不多，所以可以利用同一个页面，有差异的地方可以单独在HTML，js中判断显示
在这里插入图片描述

操作：

  主页的html：
在这里插入图片描述
  主页的js：
在这里插入图片描述
  侧滑页的html：
在这里插入图片描述
  侧滑页的js：
在这里插入图片描述
在这里插入图片描述

效果：

在这里插入图片描述
在这里插入图片描述

hoiyaku
关注
专栏目录
web前端笔试题-完善版
JackieDYH的博客
08-08 1万+
web面试题 1、定位有哪几种？分别简述其特点。 static：默认值，没有定位，元素出现在正常的文档流中 relative：生成相对定位的元素，不脱离文档流，相对于自身位置进行定位 absolute：生成绝对定位的元素，脱离文档流，相对于最近一级的定位，而不是static的父元素来进行定位 fixed：生成绝对定位元素（老IE不支持），脱离文档流，相对于浏览器窗口进行定位 2、请描述一下网页从开始请求到最终显示的完整过程 1.1在浏览器中输入地址 1.2发送到DNS服务器，解析获取域名对应的web服务器
Keycloak授权服务指南
weixin_34407348的博客
04-12 1万+
为什么80%的码农都做不了架构师？>>> ...
增加和修改共用一个页面
09-11
关于增加和修改共用一个页面的代码节省了页面的编写
mvc 3 html控件 获取 值 新增 编辑 公用一个页面
laokaizzz的专栏
04-14 1271
开发中，新增，编辑公用了一个页面，
新增、编辑、详情用同一个页面实现
fairy啊的博客
08-25 1180
有一些业务的页面大同小异，尤其是新增、编辑、详情，如果在router.js里面配置时不同的路由用不同的组件，会导致代码冗余，重复的代码复制来复制去，而且维护起来很不方便。我后来想到一个方法，就是配置不同的路由，但是它们所引用的组件都一样，进入页面时通过路由来判断是哪个页面，从而控制页面元素的显隐，调不同的接口。3、定义一个getPageType()方法，页面初始化的时候调用，通过路由来判断当前页面是属于哪个（是新增，编辑，还是详情？2、组件data()中定义一个标志，用于判断是该页面是属于哪个路由。...
angularjs实现 - 增加/删除/修改/查询/排序（优化界面）
人走丿茶凉
10-25 782
主界面效果：添加信息效果：修改信息效果：上面这张图片就是我们将要实现的效果，包括添加信息、修改信息、查询信息、删除信息、对信息排序！与上一篇文章不同的是：优化了界面效果，输入信息错误出现提示将要用到：HTML，CSS，AngularJS，jQuery代码如下：<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8">
angular8 创建模块、列表页 、表单编辑页 、查看页 、空白页 、 自定义路由模块 、文件夹下创建
朝花夕拾的博客
10-12 436
利用NG-alain创建工具 创建module ng g ng-alain:module 模块名 创建自定义路由模块 ng g module 模块名 --routing 创建list组件页 ng g ng-alain:list list -m=模块名 创建edit组件页 ng g ng-alain:edit edit -m=模块名 在列表组件页下创建编辑页 ng g ng-alain:edit edit -m=模块名 -t=list 在文件夹下创建查看页 ng g ng-alain.
前端面试题
热门推荐
qq_41887655的博客
08-08 2万+
前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? 21 每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？ 21 Quirks模式是什么？它和Standards模式有什么区别 21 div+css的布局较table布局有什么优点？ 22 img的alt与title有何异同？ strong与em的异同？ 22 你能...
web学习笔记
刘群智的博客
07-27 1万+
常用属性............................................................................................ 1 Html基础........................................................................................... 3 ...
----- 前端面试题 -----
weixin_53170812的博客
07-30 617
HTML5新增的元素 首先html5为了更好的实践web语义化，增加了header，footer，nav,aside,section等语义化标签，在表单方面，为了增强表单，为input增加了color，emial,data ,range等类型，在存储方面，提供了sessionStorage，localStorage,和离线存储，通过这些存储方式方便数据在客户端的存储和获取，在多媒体方面规定了音频和视频元素audio和vedio，另外还有地理定位，canvas画布，拖放，多线程编程的web worker和w
AngularJS-FlowChart, 可视化和编辑流程图的示例/模板WebUI控件.zip
10-10
AngularJS-FlowChart, 可视化和编辑流程图的示例/模板WebUI控件 angularjs流程图用于可视化和编辑流程图的WebUI控件。虽然这不是完全通用的，但是如果你需要使用SVG流程图并且愿意使用 AngularJS，那么它将是一个很好的基础。代码项目文章http://www.codeprojec
前端入门，使用Angular CLI完成增删改查页面
changgongcheng_yq的博客
06-28 1845
目录 一：环境准备 1.1下载nodejs 1.2修改模块路径和缓存路径配置 1.3环境变量配置 二：Angular安装和项目创建 2.1安装typeScript 2.2angular cli安装 2.3使用webstorm创建AngularCLI项目 三.AngularCLI增删改查页面代码 3.1angular文件目录分析 3.2angular常用语法 3.3一个增删改...
angularJs实现增删改查示例3-新增界面
三生三世的博客
02-19 624
可去上一篇博客salesPer.js里查看相关js方法 1、导入的js、css引用，以及angularJs需要注意的地方，如：1）、ng-app="" 与 ng-controller=""的值要和js里保持一致；2）、页面初始化方法【js里有】 2、级联下拉。选完产品后，触发vm.initPlan();方法，根据选定的产品去初始化方案，从而达到级联下拉。 【可去salesPer.
AngularJs项目中多个页面共用一个创建或编辑页面
qq_43437571的博客
07-04 1272
功能类似的项目会有类似的操作，比如：创建，编辑，删除等等。比如a页面需要创建，b页面也需要创建，c页面也需要创建，那么每个页面都写一个创建页面的html，会使代码冗余。 优化方法： 在a页面的js上： $scope.add = function() { $scope.model.errorMessage = undefined; $s...
angular创建项目编写全流程（巨详细）
威的博客
03-13 4662
*创建ui项目 初始化angular项目 G:\project\angularui\ i => install == 安装 -S => save == 保存 -D =>devDependencies => 写入devDependencies，发布到生产环境 -g =>global => 全局安装 ng new angularui //样式选择less cd angularui //进到项目目录 cnpm i //通过cnpm安装依赖 ng serve --
angular如何实现创建功能和修改功能在同一个组件中
zezeadede555的博客
05-08 409
angular如何实现创建功能和修改功能在同一个组件中 刚刚接触angular，创建功能和修改功能可以公用一个组件。记录如下 html: <formnz-form#validateForm="ngForm"(ngSubmit)="submitForm()"nzLayout="horizontal"autocomplete="off"> <!-- 模态框头部...
angular2+初学者(2)——基本介绍以及页面的修改
qq_36635153的博客
03-08 1657
一、基本介绍   通过 ng new angualrDemo，我们创建了一个名为angualrDemo的项目，ng serve启动它：        可以看到，项目已经启动。    在浏览器输入网址： localhost:4200    1）.打开src/index.html文件：可以看到这里有个 app-root 标签，我们的应用将会在这里进行渲染。    2).打开app/app.module...
AngularJS五种页面传参方法详解
本文主要介绍了AngularJS页面传参的五种常见方法，适用于不同场景的动态数据传递。以下是详细的阐述： 1. **基于ui-router的页面跳转传参**: - 在AngularJS项目中，ui-router是常用的路由管理工具。首先，在`app....
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值