细说Angular ngclass
细说Angular ng-class
在前面Angularjs开发一些经验总结中我们说到在angular开发中angular controller never 包含DOM元素（html/css），在controller需要一个简单的POJO（plain object javascript object），与view完全的隔离（交互angularjs框架的职责。但在某些项目中看见controller涉及DOM的元素最多的是在controller scope上定义某变量，其值为class name，形如：
function ctr($scope){
$scope.test = “classname”;
}
<div class=”{{test}}”></div>
这种方式完全没错，是angular提供的一种改变class的方式，但是在controller涉及了classname在我看来是乎总是那么诡异，我希望的是controller是一个干净的纯javascript意义的object。
在angular中为我们提供了3种方案处理class：
1：scope变量绑定，如上例。（不推荐使用）
2：字符串数组形式。
3：对象key/value处理。
我们继续其他两种解决方案：
1字符串数组形式是针对class简单变化，具有排斥性的变化，true是什么class，false是什么class，其形如;
function Ctr($scope) {
$scope.isActive = true ;
}
<div ng-class="{true: 'active', false: 'inactive'}[isActive]">
</div>
其结果是2中组合，isActive表达式为true，则 active，负责inactive。
2对象key/value处理主要针对复杂的class混合，其形如：
function Ctr($scope) {
}
<div ng-class {'selected': isSelected, 'car': isCar}" >
</div>
当 isSelected = true 则增加selected class，
当isCar=true,则增加car class，
所以你结果可能是4种组合。
个人推荐用2，3两种方式，不建议将class放入controller scope之上，scope需要保持纯洁行，scope上的只能是数据和行为。
作者： 破 狼
出处： http://www.cnblogs.com/whitewolf/
本文版权归作者，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。该文章也同时发布在我的独立博客中- 博客园--破狼 和 51CTO--破狼 。
最近有网友问了我 CYQ.Data 要怎么实现批量修改，于是我就花了点时间给写了以下的示例：
示例为Winform应用，现实对DataGridView控件单元格的内容后，可以实现自动更新到数据库。
先上最终结果图：
接下上一张项目解决方案图：
由于是写Demo，所以我一般都选择用文本数据库做为示例。
我新建了一个Users.ts，内容为：
ID,int;
UserName,string;
CreateTime,datetime;
意思就是表名为“Users”，字段为“ID,UserName,CreateTime”。
PS：文本数据库，可用CodeFirst实体类方式，也可以直接用传统枚举型方式，以前的文章都是用CodeFirst模式演示，这里就有了枚举型演示。
对应的标准型枚举文件TableNames.cs内容为：
/// <summary>
/// TableNames 的摘要说明
/// </summary>
public enum TableNames
{
Users,
}
public enum Users
{
ID, UserName, CreateTime
}
由于只是示例，可以用V5自带的工具生成，也可以自己新建手写了。
接下来先看一下部分代码：
首先定义一个全局的MDataTable字段：
public MDataTable table;
接下来写个Load函数，页面加载时显示下数据，然后绑定到列表控件：
private void LoadData()
{
using (MAction action = new MAction(TableNames.Users))
{
table = action.Select();
table.Bind(gvUsers);
}
}
FormLoad的代码：
private void Form1_Load(object sender, EventArgs e)
{
LoadData();
if (table.Rows.Count < 100)
{
//批量添加数据。
//给table批量添加行。
MDataRow row = null;
for (int i = 0; i < 100; i++)
{
row = table.NewRow();
row.Set(Users.UserName, "User:" + DateTime.Now.Millisecond);
row.Set(Users.CreateTime, DateTime.Now);
table.Rows.Add(row);
}
//调用表的批量添加。
table.AcceptChanges(AcceptOp.Insert);
//重新绑定到控件。
table.Bind(gvUsers);
}
}
先绑定数据，这样table就不为Null了，如果一开始没数据，table也是有数据结构的。
判断如果数据少于100行，下面的几行代码就是批量插入了，然后重新绑定到控件。
如何进行量更新呢？
private void gvUsers_CellValueChanged(object sender, DataGridViewCellEventArgs e)
{
if (table.AcceptChanges(AcceptOp.Update))
{
index++;
labTip.Text = "数据已更新到数据库..." + index;
}
else
{
labTip.Text = "数据更新失败";
}
}
方法很简单，只要处理单元格的列值改变状态就调用一下就可以了。
当然了了，由于是批量，你也可以把代码放到一个按钮里去，通过按钮点击再去确定指更新。
理论上，指量更新就到这里为止了，这里再补一点内容，就是列的中文显示：
通常我们查询后，列名都是英文的，但是系统多数是显示中文的，这里给出一种解决方案：
private void gvUsers_DataBindingComplete(object sender, DataGridViewBindingCompleteEventArgs e)
{
FieldKeyValue.FormatHeaderText(gvUsers);
}
我们在控件的DataBindingComplete事件里，翻译一下列头就可以了。
这里我把它封装到一个FieldKeyValue类里，代码如下：
public class FieldKeyValue
{
public static void FormatHeaderText(DataGridView gv)
{
for (int i = 0; i < gv.Columns.Count; i++)
{
gv.Columns[i].HeaderText = GetName(gv.Columns[i].HeaderText);
}
}
public static string GetName(string key)
{
return GetName(key, null);
}
public static string GetName(string key, string tableName)
{
Dictionary<string, string> dictionary = GetFieldDescriptionDictionary();
if (dictionary != null)
{
if (tableName != null && dictionary.ContainsKey(tableName + "_" + key))
{
return dictionary[tableName + "_" + key];
}
else if (dictionary.ContainsKey(key))
{
return dictionary[key];
}
}
return key;
}
private static Dictionary<string, string> _Dic = null;
private static Dictionary<string, string> GetFieldDescriptionDictionary()
{
if (_Dic == null)
{
_Dic = new Dictionary<string, string>();
#region 字典添加
_Dic.Add("ID", "编号");
_Dic.Add("UserName", "用户名");
_Dic.Add("CreateTime", "创建日期");
#endregion
}
return _Dic;
}
只要添加字典对应关系就可以了，由于有时候不同的表名，相同字段可能有不同的翻译，所以字典是支持：
_Dic.Add("TableA_ID", "编号");
_Dic.Add("TableB_ID", "标识");
该类会优先判断查询“表名_字段名”，如果找不到才找“字段名”。
最后提供Demo项目源码下载： CYQ.Data_V5_Test_Win.rar
对于Winform的分页，可以下载我的Winform分页控件： C#Winform通用分页控件实战篇(提供源码下载)
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息查看更多关于细说Angular ngclass的详细内容...