2017.12.18 Angular js获取父级下标、JQu

第一组：杨昊 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;
}

2. 在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文档