Angularjs总结(五)指令运用及常用控件的赋值操作

1、常用指令

 1 <div ng-controller="jsyd-controller">
 2     <div style="float:left;width:100%; " ng-show="clickValue1=='登记'">
 3 
 4         <div ng-include src="'/partials/11.html'"></div>
 5 
 6     </div>
 7     <div class="item" ng-class="{true: 'item', false: 'item2'}[clickValue=='受理']">
 8 
 9         <ul>
10 
11             <div ng-disabled="IsDisable" ng-click="clickValue='受理'">受理信息</div>
12 
13         </ul>
14 
15     </div>
16 </div>

ng-class、ng-show、ng-disabled、ng-if、ng-hide
加载页面时赋值(重点:ng-class的css赋值操作)
$scope.clickValue = '受理';
$scope.clickValue1='登记';
$scope.IsDisable=true;

2.行选中

 1 <table>
 2     <thead style="background-color:#e4e9ef;">
 3         <tr>
 4             <td class="td" style="width:10%">序号</td>
 5             <td class="td" style="width:20%">宗地代码</td>
 6             <td class="td" style="width:10%">宗地面积</td>
 7             <td class="td" style="width:30%">操作</td>
 8         </tr>
 9     </thead>
10     <tbody>
11         <tr ng-class='{selected: ZJDFG==selectedRow}' ng-click="TDXXClick(ZJDFG)" ng-repeat="ZJDFG in ZJDFGList ">
12             <td class="td" ng-bind="$index 1">1</td>
13             <td class="td">{{ZJDFG.ZDDM}}</td>
14             <td class="td ">{{ZJDFG.ZDMJ}}</td>
15             <td class="td ">
16                 <a name={{postitem.Id}} type="button" ng-click="CheckZJDFG(ZJDFG) ">查看</a>
17                 <a name={{postitem.Id}} type="button" ng-show="Isck" ng-
18                    show="IsShowback" ng-disabled="IsDisable" ng-click="EditZJDFG(ZJDFG) ">编辑</a>
19                 <a name={{postitem.Id}} type="button" ng-show="Isck" ng-
20                    show="IsShowback" ng-click="DeleteZJDFG(ZJDFG.ID) ">删除</a>
21             </td>
22         </tr>
23     </tbody>
24 </table>

ng-click、ng-repeat、ng-class的运用

行选中
$scope.TDXXClick = function (data) {
     $scope.selectedRow = data;
}

3.下拉框  ng-options、ng-model的运用

<select ng-model="QLLXCode " ng-options="option.Code as option.Name for option in QLLX "></select>

js:

var add = { "Name": "--请选择--", "Code": "-1" };
QLLX.unshift(add);
$scope.QLLX = [{Code:1,name:'nihao'},{Code:2,name:'nihao'}];
if ($scope.QLLXCode == null)
$scope.QLLXCode = $scope.QLLX[0].Code;

4.radio按钮

1 <input value="{{item.ID}}" name="ztfaxz" type="radio" ng-model="meIsChecked" ng-click="MeClick(item.ID)" />

js:

//当value和meIsChecked相等时为选中
$scope.meIsChecked = $scope.Custom.MeID;

5.checkbox

1 <div ng-model="PermissionGroups" class="post_Roles">
2     <label ng-repeat="roleItem in PermissionGroups" class="role_name" style="width:175px;">
3         <input type="checkbox" ng-model="roleItem.isChecked" />&nbsp;<label>{{roleItem.name}}</label>
4     </label>
5 </div>

js:

//为true时为选中
$scope.postItemInfo.PermissionGroups = [];
angular.forEach($scope.PermissionGroups,function (value, key) {
if (value.isChecked) {
$scope.postItemInfo.PermissionGroups.push(value.id);
}
});

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361007.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux截图软件

在Linux下很多软件使用命令就可以很好的操作&#xff0c;截图软件也不例外。刚好要截图使用一下&#xff0c;就找到了这款小巧的却很使用的Linux下的截图工具&#xff0c;就是scrot。 如何安装及使用? 1.安装篇很简单&#xff0c;想安装其他软件一样&#xff0c;Fedora下 yum …

Web开发的那点事--软件复用

CSDN博客不再经常更新&#xff0c;更多优质文章请来 粉丝联盟网 FansUnion.cn! (FansUnion) 复用的战场 1.前台 CSS,JavaScript/jquery/AJAX HTML/JSP 2.后台 增删改查 几乎一样。复用的级别 代码&#xff1a;一行代码或几行代码 函数&#xff1a;一个函数 类&#xff1a…

NodeJS学习笔记—1.CommonJS规范

由于现在web开发&#xff0c;越来越重视代码的复用和抽象的封装&#xff0c;为了解决代码的组织结构、管理、复用和部署等问题&#xff0c;现在普遍采用的机制是模块机制&#xff08;module&#xff09;。CommonJS约定桌面应用程序和服务器应用程序需要的API&#xff0c;如操作…

鼠标事件和键盘事件总结 及判断是不是数字方法

事件 Delegate 命名空间 数据的类 实现 鼠 标 事 件 "MouseHover" "MouseLeave" "MouseEnter" EventHandler System EventArgs 1、定义&#xff1a;"组件名"."事件名称" new System.EventHandl…

angularjs 利用filter进行表单查询及分页查询

页面&#xff1a; <div><input style"width:90%;margin-left:5px;margin-right:5px;" class"form-control sys_input" ng-model"imagePaths.filter.imageName" placeholder"查询..."/></div><div><!--<…

为什么现在是升级到Java 8的最佳时机

有兴趣了解如何通过AppDynamics充分利用Java 8的新功能吗&#xff1f; 立即开始免费试用 &#xff01; 今年3月&#xff0c;Oracle发布了近十年来最受期待的版本Java8。自发布以来&#xff0c;最新版本引起了越来越多的关注&#xff0c;各种规模的公司都渴望升级。 我们的合作…

requirejs与anjularjs框架

1.目录 2.首页login.html如下&#xff1a; <!DOCTYPE html><html> <head> <title>登录界面</title> <link relstylesheet href/stylesheets/style.css /> <link rel"stylesheet" href"/css/bootstrap.min.css">…

Qt基于TCP网络程序发包封包抽象

之前没经验, 发送数据包的时候, 包头包尾等信息都是通过重新定义一个结构体实现, 不同的协议包就有不同的结构体, 结果导致这样的现象: 有多少上层业务协议包, 我就分别重新定义一个对应的加上包头包尾的新的结构体, 很费劲.......额.... 现在, 重新想了下, 一个改进的方式, 把…

SQL学习笔记

可以把 SQL 分为两个部分&#xff1a;数据操作语言 (DML) 和 数据定义语言 (DDL)。 查询和更新指令构成了 SQL 的 DML 部分&#xff1a; SELECT - 从数据库表中获取数据UPDATE - 更新数据库表中的数据DELETE - 从数据库表中删除数据INSERT INTO - 向数据库表中插入数据SQL 的数…

Spring MVC 4快速入门Maven原型已改进

Spring Boot使Spring入门非常容易。 但是仍然有人对不使用Spring Boot并以更经典的方式引导应用程序感兴趣。 几年前&#xff0c;我创建了一个原型&#xff08;早于Spring Boot&#xff09;&#xff0c;简化了引导Spring Web应用程序的过程。 尽管Spring Boot已经上市了一段时间…

图片循环播放

使用 pageSwitch插件 多种效果 引入 jquery.js 和 pageSwitch.min.js <script src"js/jquery-1.11.0.min.js"></script> <script src"dist/pageSwitch.min.js"></script>在页面定义标签 <div id"container">…

当你辛辛苦苦写的博客文章被无情复制,成为了他的原创,你作何感想?

我一直都说我之所以开始写博客&#xff0c;是因为我是想把博客当成一个备忘录&#xff0c;同时也能分享给大家。我才开博1个月&#xff0c;还没有写几篇文章&#xff0c;我发现每篇文章都被很多网站转载了&#xff0c;有的署名或者是贴上我文章的地址作为来源地址。 对于这种情…

SSL / TLS REST服务器–带有Spring和TomEE的客户端

在构建系统时&#xff0c;开发人员通常会忽略安全性方面。 安全一直是令人担忧的重要问题&#xff0c;但是它比以前吸引了更高的关注。 就在今年&#xff0c;我们发生了像Heartbleed Bug或CelebrityGate丑闻这样的案件。 这与帖子无关&#xff0c;只是安全真正重要的示例&#…

linux apf防火墙安装配置

linux apf防火墙安装配置APF(Advanced Policy Firewall)是 Rf-x Networks 出品的Linux环境下的软件防火墙,被大部分Linux服务器管理员所采用,使用iptables的规则,易于理解及使用。 www.2cto.com 适合对iptables不是很熟悉的人使用&#xff0c;因为它的安装配置比较简单&#x…

jquery实现上传图片及图片大小验证、图片预览效果代码

jquery实现上传图片及图片大小验证、图片预览效果代码jquery实现上传图片及图片大小验证、图片预览效果代码 上传图片验证 */ function submit_upload_picture(){ var file $(file_c).value; if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){ aler…

使用Spring Boot和Logback登录到Redis

在进行集中式日志记录时&#xff0c;例如使用Elasticsearch&#xff0c;Logstash和Kibana或Graylog2&#xff0c;您可以为Java应用程序提供几个选项。 您既可以编写标准的应用程序日志&#xff0c;也可以使用Logstash解析这些日志&#xff0c;这些日志既可以直接使用&#xff0…

《CSS世界》学习笔记(一)

《CSS世界》&#xff0c;张鑫旭著&#xff0c;人民邮电出版社&#xff0c;2017年12月第一版。 1.P9二维码链接文章的demo值得一看&#xff0c;可以实现有关“某些区域颜色始终保持一致”的效果。 P9二维码所链接文章的一个demo里&#xff0c;图标用i标签 背景图的形式实现。我…

Tautology(poj3295)(DFS)

本题中最多5个命题变项&#xff1a;p,q,r,s,t 每个有0,1两种取值&#xff0c;所以总共32种情况&#xff0c;分别枚举即可。 对于每种情况&#xff0c;计算表达式的值&#xff0c;如果有结果为0的则输出not 难点在于如何计算表达式的值&#xff0c;我们采用递归的方法&#xff0…

Spring重试–与项目集成的方式

如果您需要在代码中实现健壮的重试逻辑&#xff0c;一种行之有效的方法是使用spring重试库。 我的目的不是要展示如何使用spring retry项目本身&#xff0c;而是要展示可以将其集成到代码库中的不同方式。 考虑一种服务来调用外部系统&#xff1a; package retry.service;pub…

(1)《Head First HTML与CSS》学习笔记---HTML基本概念

前言&#xff1a; 1. 这本书并没有面面俱到&#xff0c;涵盖所有内容&#xff0c;只提供作为初学者真正需要的东西&#xff1a;基本知识和信心。所以这不是唯一的参考书。&#xff08;我买了一本《HTML5权威指南》作为参考书和这本一起看&#xff0c;但还是以本书为第一个…