关于angularjs的下拉列表的绑定
2016-01-15 10:24
609 查看
1:数据库的表. /// <summary>
/// 会员类型(MEMBERTYPE:00:系统用户 01:个人 02:教师 03:机构 04:音协)
/// </summary>
public string MemeberType { get; set; }
/// <summary>
/// 显示名
/// </summary>
public string Name { get; set; }
/// <summary>
/// 登录名
/// </summary>
public string LoginName { get; set; }
/// <summary>
/// 真实姓名
/// </summary>
public string RealName { get; set; }
/// <summary>
/// 密码
/// </summary>
public string Password { get; set; }
/// <summary>
/// 头像
/// </summary>
public string HeadImage { get; set; }
/// <summary>
/// 出生日期
/// </summary>
public DateTime? Birthday { get; set; }
/// <summary>
/// 省份
/// </summary>
public string Province { get; set; }
/// <summary>
/// 城市
/// </summary>
public string City { get; set; }
/// <summary>
/// 区域
/// </summary>
public string Area { get; set; }
/// <summary>
/// 邮编
/// </summary>
public string Zipcode { get; set; }
/// <summary>
/// 详细地址
/// </summary>
public string Address { get; set; }
/// <summary>
///性别
/// </summary>
public bool Gender { get; set; }
/// <summary>
/// 简介
/// </summary>
public string Introduction { get; set; }
/// <summary>
/// 手机号
/// </summary>
public string Mobile { get; set; }
/// <summary>
/// 邮箱
/// </summary>
public string Mail { get; set; }
/// <summary>
/// 会员等级 MEMBERVIP:99:普通会员 01:一级会员 02:二级会员 03:三级会员 04:四级会员 05:五级会员
/// </summary>
public string Vip { get; set; }
/// <summary>
/// 有效期
/// </summary>
public DateTime? ValidityPeriod { get; set; }
2:控制器中获取会员列表函数
/// <summary>
/// 获取类别为教师的数据("02")
/// </summary>
/// <param name="MemberType"></param>
/// <returns></returns>
public ActionResult GetMemberList(string MemberType)
{
MemberService memberService = new MemberService();
List<Member> memberlist = memberService.GetMemberList(MemberType);
Hashtable rtnVal = new Hashtable();
rtnVal.Add("list", memberlist);
return CreateJsonResult(rtnVal);
}
3:具体的函数
/ // <summary>
/// 获取类别为教师的会员列表
/// </summary>
/// <param name="MemberType"></param>
/// <returns></returns>
public List<Member> GetMemberList(string MemberType) //传过来的参数是"02"
{
return base.FindList().FindAll(x => x.MemeberType == MemberType);
}
4:congtroller.js中调用改方法
//调用GetMemberList()方法,获取会员类别为教师的编号
$http.post('Course/GetMemberList', { MemberType: "02" }) //传入参数“02”
.success(function (response) {
var model = $scope.model = {};
model.members = response.Data.list; //最终的目的是要找出会员类别是 教师的编号,然后进行绑定
model.Membercode = "22"; //给一个初始值 Membercode是会员编号
}, function (x) {
Notify.alert('Server Request Error', $rootScope.notifyOpts);
});
5:html页面
<div class="form-group">
<label for="model_MemberCode" class="control-label col-md-2">{{'COURSE.MEMBERCODE' | translate}}</label>
<div class="col-md-10">
<select class="form-control" name="model_MemberCode" required="" ng-model="model.Membercode" ng-options="member.Code as member.RealName for member in model.members">
<option value="">--目的是获取会员类别是教师的编号--</option>
</select>
<span ng-show="validateInput('model_MemberCode', 'required')" class="text-danger">不可为空</span>
</div>
</div>
/// 会员类型(MEMBERTYPE:00:系统用户 01:个人 02:教师 03:机构 04:音协)
/// </summary>
public string MemeberType { get; set; }
/// <summary>
/// 显示名
/// </summary>
public string Name { get; set; }
/// <summary>
/// 登录名
/// </summary>
public string LoginName { get; set; }
/// <summary>
/// 真实姓名
/// </summary>
public string RealName { get; set; }
/// <summary>
/// 密码
/// </summary>
public string Password { get; set; }
/// <summary>
/// 头像
/// </summary>
public string HeadImage { get; set; }
/// <summary>
/// 出生日期
/// </summary>
public DateTime? Birthday { get; set; }
/// <summary>
/// 省份
/// </summary>
public string Province { get; set; }
/// <summary>
/// 城市
/// </summary>
public string City { get; set; }
/// <summary>
/// 区域
/// </summary>
public string Area { get; set; }
/// <summary>
/// 邮编
/// </summary>
public string Zipcode { get; set; }
/// <summary>
/// 详细地址
/// </summary>
public string Address { get; set; }
/// <summary>
///性别
/// </summary>
public bool Gender { get; set; }
/// <summary>
/// 简介
/// </summary>
public string Introduction { get; set; }
/// <summary>
/// 手机号
/// </summary>
public string Mobile { get; set; }
/// <summary>
/// 邮箱
/// </summary>
public string Mail { get; set; }
/// <summary>
/// 会员等级 MEMBERVIP:99:普通会员 01:一级会员 02:二级会员 03:三级会员 04:四级会员 05:五级会员
/// </summary>
public string Vip { get; set; }
/// <summary>
/// 有效期
/// </summary>
public DateTime? ValidityPeriod { get; set; }
2:控制器中获取会员列表函数
/// <summary>
/// 获取类别为教师的数据("02")
/// </summary>
/// <param name="MemberType"></param>
/// <returns></returns>
public ActionResult GetMemberList(string MemberType)
{
MemberService memberService = new MemberService();
List<Member> memberlist = memberService.GetMemberList(MemberType);
Hashtable rtnVal = new Hashtable();
rtnVal.Add("list", memberlist);
return CreateJsonResult(rtnVal);
}
3:具体的函数
/ // <summary>
/// 获取类别为教师的会员列表
/// </summary>
/// <param name="MemberType"></param>
/// <returns></returns>
public List<Member> GetMemberList(string MemberType) //传过来的参数是"02"
{
return base.FindList().FindAll(x => x.MemeberType == MemberType);
}
4:congtroller.js中调用改方法
//调用GetMemberList()方法,获取会员类别为教师的编号
$http.post('Course/GetMemberList', { MemberType: "02" }) //传入参数“02”
.success(function (response) {
var model = $scope.model = {};
model.members = response.Data.list; //最终的目的是要找出会员类别是 教师的编号,然后进行绑定
model.Membercode = "22"; //给一个初始值 Membercode是会员编号
}, function (x) {
Notify.alert('Server Request Error', $rootScope.notifyOpts);
});
5:html页面
<div class="form-group">
<label for="model_MemberCode" class="control-label col-md-2">{{'COURSE.MEMBERCODE' | translate}}</label>
<div class="col-md-10">
<select class="form-control" name="model_MemberCode" required="" ng-model="model.Membercode" ng-options="member.Code as member.RealName for member in model.members">
<option value="">--目的是获取会员类别是教师的编号--</option>
</select>
<span ng-show="validateInput('model_MemberCode', 'required')" class="text-danger">不可为空</span>
</div>
</div>
相关文章推荐
- 关于angularjs中的时间控件datepicker
- AngularJS + ui-router + RequireJS异步加载注册controller/directive/filter/service
- AngularJS学习之directive自定义指令
- Angularjs 服务注册
- 利用CSS3在Angular中实现动画
- 实例详解AngularJS实现无限级联动菜单
- 前端开发入门:AngularJS
- AngularJs 与Jquery的对比分析,超详细!
- AngularJS中实现无限级联动菜单
- 16-Angular中的动画
- AngularJS学习笔记1
- AngularJS进阶(二十八)解决AngualrJS页面刷新导致异常显示问题
- AngularJS进阶(二十八)解决AngualrJS页面刷新导致异常显示问题
- angular 之表单验证
- angular 表单验证之ngMessages
- Angularjs实例5
- angularjs select 循环中出现第一个 option 为空格问题
- Angularjs实例4
- angularjs 测试
- Angular新手可能遇到的问题