AngularJS ng-model 指令ng-model是 AngularJS 中最重要的指令之一用于实现双向数据绑定Two-way Data Binding。它将表单控件的值与作用域Scope中的属性绑定在一起使得数据的变化能够自动同步。一、基本概念1. 什么是双向数据绑定双向数据绑定意味着视图 → 模型用户在表单控件中输入数据时自动更新作用域中的变量模型 → 视图作用域中的变量变化时自动更新表单控件的显示值┌─────────────┐ ┌─────────────┐ │ 视图 │ ←→ │ 模型 │ │ (表单控件) │ │ (Scope变量) │ └─────────────┘ └─────────────┘2. 基本语法inputtypetextng-model变量名// 控制器中$scope.name张三;二、基本用法1. 文本输入框divng-appmyAppng-controllerMyCtrlinputtypetextng-modelnameplaceholder请输入姓名p你输入的是{{ name }}/p/divangular.module(myApp).controller(MyCtrl,function($scope){$scope.name初始值;});2. 文本域textareang-modeldescriptionrows4cols50/textareap描述{{ description }}/p3. 数字输入inputtypenumberng-modelagemin0max120p年龄{{ age }}/p三、不同表单控件的使用1. 复选框单个复选框inputtypecheckboxng-modelisCheckedp状态{{ isChecked ? 已选中 : 未选中 }}/p复选框组divng-repeatitem in itemsinputtypecheckboxng-modelitem.selectediditem-{{ $index }}labelforitem-{{ $index }}{{ item.name }}/label/divp已选{{ items | filter:{selected:true} | json }}/p$scope.items[{name:选项1,selected:false},{name:选项2,selected:false},{name:选项3,selected:false}];2. 单选框inputtyperadiong-modelgendervaluemale男inputtyperadiong-modelgendervaluefemale女inputtyperadiong-modelgendervalueother其他p性别{{ gender }}/p注意所有单选框的ng-model必须相同value不同。3. 下拉框基本用法selectng-modelselectedCityoptionvalue请选择城市/optionoptionvaluebeijing北京/optionoptionvalueshanghai上海/optionoptionvalueguangzhou广州/option/selectp选择的城市{{ selectedCity }}/p使用ng-options推荐selectng-modelselectedCityng-optionscity.code as city.name for city in citiesoptionvalue-- 请选择 --/option/selectp代码{{ selectedCity }}/pp名称{{ getCityName(selectedCity) }}/p$scope.cities[{code:bj,name:北京},{code:sh,name:上海},{code:gz,name:广州}];$scope.getCityNamefunction(code){varcity$scope.cities.find(function(c){returnc.codecode;});returncity?city.name:;};ng-options语法详解!-- 1. 数组值作为显示文本 --selectng-modelselectedng-optionsitem for item in items/select!-- 2. 数组值和显示文本不同 --selectng-modelselectedng-optionsitem.id as item.name for item in items/select!-- 3. 数组分组 --selectng-modelselectedng-optionsitem.name group by item.category for item in items/select!-- 4. 对象键值对 --selectng-modelselectedng-optionskey as value for (key, value) in object/select!-- 5. 对象键值对值作为显示文本 --selectng-modelselectedng-optionskey for (key, value) in object/select四、ng-model 的修饰符1.ng-model-options控制数据绑定的行为。!-- 延迟更新失去焦点时才更新 --inputtypetextng-modelnameng-model-options{ updateOn: blur }!-- 防抖延迟 500ms 更新 --inputtypetextng-modelnameng-model-options{ debounce: 500 }!-- 多事件触发 --inputtypetextng-modelnameng-model-options{ updateOn: default blur, debounce: { default: 500, blur: 0 } }!-- 允许无效值 --inputtypeemailng-modelemailng-model-options{ allowInvalid: true }2.ng-trim自动去除输入值的首尾空格默认为true。!-- 自动去除空格 --inputtypetextng-modelnameng-trimtrue!-- 保留空格 --inputtypetextng-modelnameng-trimfalse五、表单验证与 ng-modelng-model与表单验证紧密相关通过$error和$valid/$invalid等属性进行验证。1. 基本验证formnamemyFormnovalidateinputtypetextnameusernameng-modelusernamerequiredng-minlength3ng-maxlength10ng-pattern/^[a-zA-Z]$/png-showmyForm.username.$error.required用户名必填/ppng-showmyForm.username.$error.minlength至少3个字符/ppng-showmyForm.username.$error.maxlength最多10个字符/ppng-showmyForm.username.$error.pattern只能包含字母/pp有效{{ myForm.username.$valid }}/pp无效{{ myForm.username.$invalid }}/pp脏{{ myForm.username.$dirty }}/pp原始{{ myForm.username.$pristine }}/p/form2. 表单状态属性属性说明$valid表单/字段是否有效$invalid表单/字段是否无效$pristine表单/字段是否未被修改$dirty表单/字段是否已被修改$touched表单/字段是否已被触碰$untouched表单/字段是否未被触碰$error包含所有验证错误的对象3. 实时验证示例formnamemyFormnovalidatedivclassform-groupng-class{ has-error: myForm.email.$invalid myForm.email.$dirty }label邮箱/labelinputtypeemailnameemailng-modelemailrequiredpclasshelp-blockng-showmyForm.email.$error.required myForm.email.$dirty邮箱必填/ppclasshelp-blockng-showmyForm.email.$error.email myForm.email.$dirty邮箱格式不正确/p/divbuttontypesubmitng-disabledmyForm.$invalid提交/button/form六、高级用法1. 自定义指令中使用 ng-modelangular.module(myApp).directive(myInput,function(){return{restrict:E,require:ngModel,template:input typetext ng-modelngModel,scope:{ngModel:},link:function(scope,element,attrs,ngModelCtrl){// 访问 ngModelControllerngModelCtrl.$formatters.push(function(value){// 格式化模型值到视图returnvalue?value.toUpperCase():;});ngModelCtrl.$parsers.push(function(value){// 解析视图值到模型returnvalue?value.toLowerCase():;});}};});2.$formatters和$parsers// 在控制器中$scope.$watch(price,function(newVal){// 监听模型变化});// 在自定义指令中link:function(scope,element,attrs,ngModelCtrl){// 模型 → 视图格式化ngModelCtrl.$formatters.push(function(modelValue){returnmodelValue?modelValue.toFixed(2):;});// 视图 → 模型解析ngModelCtrl.$parsers.push(function(viewValue){returnparseFloat(viewValue);});}3.$validators和$asyncValidators// 同步验证ngModelCtrl.$validators.customfunction(modelValue,viewValue){returnmodelValuemodelValue.length3;};// 异步验证ngModelCtrl.$asyncValidators.uniquefunction(modelValue,viewValue){return$http.get(/api/check-username,{username:modelValue}).then(function(response){returnresponse.data.available;});};七、常见问题与最佳实践1. 避免在ng-repeat中直接使用原始类型!-- 不推荐 --divng-repeatitem in [1, 2, 3]inputtypecheckboxng-modelitem/div!-- 推荐 --divng-repeatitem in itemsinputtypecheckboxng-modelitem.checked/div2. 使用ng-model-options优化性能!-- 搜索框使用防抖减少更新频率 --inputtypetextng-modelsearchTextng-model-options{ debounce: 300 }placeholder搜索...3. 处理初始值// 确保模型有初始值$scope.user{name:,email:,gender:male// 默认值};4. 避免在表达式中直接修改模型!-- 不推荐 --inputtypetextng-modelnameng-changename name.toUpperCase()!-- 推荐 --inputtypetextng-modelnameng-changeformatName()$scope.formatNamefunction(){$scope.name$scope.name.toUpperCase();};八、总结ng-model是 AngularJS 双向数据绑定的核心通过它可以轻松实现表单控件与模型数据的同步。掌握ng-model的各种用法、修饰符和验证机制是构建响应式表单应用的关键。关键点双向绑定视图 ↔ 模型自动同步支持多种表单控件文本、复选框、单选框、下拉框配合表单验证$valid,$invalid,$error修饰符ng-model-options,ng-trim高级功能$formatters,$parsers,$validators