2017.12.18 Angular js获取父级下标、JQuery获取节点元素、Observer设计模式、制作红圈提示框、Winform中的TextBox

第一组:杨昊 Angular js双重循环获取父级下标$index

在显示数据时可能遇到使用ng-repeat的情况,同时我们可能需要拿到某一级数组的当前字段值,这时可以用$index来取值。

$index可以看做数组当前值的下标,<div ng-repeat=”e in list track by $index ”></div>中,e的值等于list[$index]。
而在遇到ng-repeat嵌套的情况,可以用$parent.$index来取值。

注意:$index需要慎重使用,在给ng-repeat加上过滤器的情况下


image.png

利用$index取值可能与上图中的item的值不匹配(过滤后的数组可以算一个新数组,长度发生了变化,items[$index]不一定是原数组当前下标的值)。

实例:如下图所示,直接获取父级下标,只有两个ng-repeat写在一起的时候,使用 $parent.$index即可获取,若每多一级ng-if之类的判断条件,则接着在往上一级寻找即可。


image.png

第二组:叶佳意 JQuery获取节点的兄弟,父级,子级元素的方法

  1. jQuery.parent(expr),找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class")

  2. jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素

  3. jQuery.children(expr).返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点

  4. jQuery.contents(),返回下面的所有内容,包括节点和文本。这个方法和children()的区别就在于,包括空白文本,也会被作为一个

  5. jQuery对象返回,children()则只会返回节点

  6. jQuery.prev(),返回上一个兄弟节点,不是所有的兄弟节点

  7. jQuery.prevAll(),返回所有之前的兄弟节点

  8. jQuery.next(),返回下一个兄弟节点,不是所有的兄弟节点

  9. jQuery.nextAll(),返回所有之后的兄弟节点

  10. jQuery.siblings(),返回兄弟姐妹节点,不分前后

  11. jQuery.find(expr),跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分,而jQuery.find()的返回结果,不会有初始集合中的内容,比如$("p"),find("span"),是从<p>元素开始找<span>,等同于$("p span").


第三组:吴景霞 Observer设计模式简介

上面的例子显然能完成我们之前描述的工作,但是却并不够好。现在假设热水器由三部分组成:热水器、警报器、显示器,它们来自于不同厂商并进行了组装。那么,应该是热水器仅仅负责烧水,它不能发出警报也不能显示水温;在水烧开时由警报器发出警报、显示器显示提示和水温。

这时候,上面的例子就应该变成这个样子:

// 热水器
// 烧水
public class Heater {
    private int temperature;
    private void BoilWater() {
        for (int i = 0; i <= 100; i++) {
            temperature = i;
        }
    }
}
// 警报器
public class Alarm {
    private void MakeAlert(int param) {
        Console.WriteLine("Alarm:嘀嘀嘀,水已经 {0} 度了:", param);
    }
}
// 显示器
public class Display {
    private void ShowMsg(int param) {
        Console.WriteLine("Display:水已烧开,当前温度:{0}度。", param);
    }
}

这里就出现了一个问题:如何在水烧开的时候通知报警器和显示器?在继续进行之前,我们先了解一下Observer设计模式,Observer设计模式中主要包括如下两类对象:

  1. Subject:监视对象,它往往包含着其他对象所感兴趣的内容。在本范例中,热水器就是一个监视对象,它包含的其他对象所感兴趣的内容,就是temprature字段,当这个字段的值快到100时,会不断把数据发给监视它的对象。

  2. Observer:监视者,它监视Subject,当Subject中的某件事发生的时候,会告知Observer,而Observer则会采取相应的行动。在本范例中,Observer有警报器和显示器,它们采取的行动分别是发出警报和显示水温。

在本例中,事情发生的顺序应该是这样的:

  1. 警报器和显示器告诉热水器,它对它的温度比较感兴趣(注册)。
  2. 热水器知道后保留对警报器和显示器的引用。
  3. 热水器进行烧水这一动作,当水温超过95度时,通过对警报器和显示器的引用,自动调用警报器的MakeAlert()方法、显示器的ShowMsg()方法。

类似这样的例子是很多的,GOF对它进行了抽象,称为Observer设计模式:Observer设计模式是为了定义对象间的一种一对多的依赖关系,以便于当一个对象的状态改变时,其他依赖于它的对象会被自动告知并更新。Observer模式是一种松耦合的设计模式。

实现范例的Observer设计模式

我们之前已经对委托和事件介绍很多了,现在写代码应该很容易了,现在在这里直接给出代码,并在注释中加以说明。

using System;
using System.Collections.Generic;
using System.Text;
namespace Delegate {
    // 热水器 
    public class Heater {
        private int temperature;
        public delegate void BoilHandler(int param);
        //声明委托
        public event BoilHandler BoilEvent;
        //声明事件 // 烧水
        public void BoilWater() {
            for (int i = 0; i <= 100; i++) {
                temperature = i;
                if (temperature > 95) {
                    if (BoilEvent != null) {
                        //如果有对象注册
                        BoilEvent(temperature);
                        //调用所有注册对象的方法
                    }
                }
            }
        }
    }
    // 警报器
    public class Alarm {
        public void MakeAlert(int param) {
            Console.WriteLine("Alarm:嘀嘀嘀,水已经 {0} 度了:", param);
        }
    }
    // 显示器
    public class Display {
        public static void ShowMsg(int param) {//静态方法       
            Console.WriteLine("Display:水快烧开了,当前温度:{0}度。", param);
        }
    }
    class Program {
        static void Main() {
            Heater heater = new Heater();
            Alarm alarm = new Alarm();
            heater.BoilEvent += alarm.MakeAlert;
            //注册方法
            heater.BoilEvent += (new Alarm()).MakeAlert;
            //给匿名对象注册方法
            heater.BoilEvent += Display.ShowMsg;
            //注册静态方法
            heater.BoilWater();
            //烧水,会自动调用注册过对象的方法
        }
    }
}输出为:Alarm:嘀嘀嘀,水已经96度了:Alarm:嘀嘀嘀,水已经96度了:Display:水快烧开了,当前温度:96度。

第四组:傅云 如何制作网页提示框边上的红圈提示

image.png

例:

  1. 建一个CSS
.circle {
    right: 10px;
    top: 0px;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    color: #ffffff;
    background-color: #ff0000;
}
  1. 在div中加入需要显示的文字或数字或动态获取数据
<div class="circle" id="AbnormalCount">0</div>

第五组:王颢 Winform中的TextBox的小技巧

1. 一些常用属性
this.textBox5.PasswordChar = '@'; //密码的样式
this.textBox5.UseSystemPasswordChar = true;  //如果这个属性为true,则密码就和系统默认的密码样式相同,而PasswordChar属性不起作用.
this.textBox5.Multiline = true; //多行显示
this.textBox5.WordWrap = true;   //自动换行
this.textBox5.ScrollBars = ScrollBars.Vertical;  //显示垂直滚动条。ScrollBars的枚举值之一。
this.textBox5.MaxLength = 100; //在文本框中输入的最大字符数。
2. 实现自动完成功能,提高用户体验

想实现自动完成,就必须明白三个属性:
AutoCompleteSource属性: 设置自动完成的来源。此属性的值为AutoCompleteSource枚举值之一

AutoCompleteMode属性:设置自动完成的显示模式。此属性的值为AutoCompleteMode枚举值之一

AutoCompleteCustomSource属性:自定义完成来源。当AutoCompleteSource属性值为CustomSource时,此属性才起做用。属性值为AutoCompleteStringCollection集合对象,可以通过AutoCompleteCustomSource属性这个集合。

可以通过直接属性值来实现自动完成,也可以用代码实现,用代码如下:


AutoCompleteStringCollection myCutomSource = new AutoCompleteStringCollection();
myCutomSource.AddRange(new string[] {
    "成都市东门",
    "成都市北门",
    "成都市西门",
    "成都市南门"
});
this.textBox5.AutoCompleteSource = AutoCompleteSource.CustomSource;
this.textBox5.AutoCompleteMode = AutoCompleteMode.SuggestAppend;
this.textBox5.AutoCompleteCustomSource = myCutomSource;
3. TextBox控件中的字符在输入同时立即转换为大写或小写

方法一:通过CharacterCasing属性来实现。此属性默认的值为Normal,意思是字符的大小写不会改变。还有2个属性值:Upper和Lower。

方法二:通过TextBox的KeyPress事件实现

private void textBox3_KeyPress(object sender, KeyPressEventArgs e)
        {
            if (char.IsLower(e.KeyChar))
            {
                textBox3.SelectedText = char.ToUpper(e.KeyChar).ToString();
                e.Handled = true;
            }
        }
4. 验证用户输入,增加用户体验

基本的思路是:首先,使用控件的Validating事件来验证用户的输入。其次,当输入值不符合要求时,用ErrorProvider控件通知用户或者 用MessageBox以弹出对话框的形式通知用户。显然用RrrorProvider控件通知用户更具用户体验性。
……
……
……
详情参考doc文档

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,968评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,601评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,220评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,416评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,425评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,144评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,432评论 3 401
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,088评论 0 261
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,586评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,028评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,137评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,783评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,343评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,333评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,559评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,595评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,901评论 2 345

推荐阅读更多精彩内容

  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,354评论 0 44
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,601评论 18 139
  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    程序员poetry阅读 16,635评论 18 503
  • 一个大风乱舞的清晨 云朵飘摇 人们忧伤的脸上 是许多种无奈交织在一起 都在奋斗着 都在努力生活着 这是一个商品社会...
    皆非_lx阅读 260评论 0 2
  • This article provides a general overview of time-frequenc...
    Corgimy阅读 390评论 0 0