Angular - - ngReadonly、ngSelected、ngDisabled
2015-12-17 14:12
281 查看
ngReadonly
该指令将input,textarea等文本输入设置为只读。
HTML规范不允许浏览器保存类似readonly的布尔值属性。如果我们将一个Angular的插入值表达式转换为这样的属性,那么当浏览器删除该属性时,绑定信息就会丢失。这个指令不被浏览器删除,并且提供了一个永久性的可靠的地方来存储绑定信息。
格式:ng-readonly=“value”
value:表达式 结果为boolean类型
使用代码:
这个指令用的比较多的地方如编辑资料,但是某些字段是只读的,不让编辑的,这时候就可以设置 ngReadonly=“true”了,并且还是可通过js直接操作,只需要操作的表达式返回值是true/false即可。然后野兽在项目中用到大多在 datetimepicker插件上设置这个指令,只能通过日历选择日期,而不能直接输入来选择。
ngSelected
该指令为select设置了指定的选中值。
HTML规范不允许浏览器保存类似selected的布尔值属性。如果我们将一个Angular的插入值表达式转换为这样的属性,那么当浏览器删除该属性时,绑定信息就会丢失。这个指令不被浏览器删除,并且提供了一个永久性的可靠的地方来存储绑定信息。
格式:ng-selected=“value”
value:表达式 结果是boolean类型。
使用代码:
select还有绑定方法,代码如下:
上面的代码运行后自动绑定选中值是第二个选项,是因为ngModel的值是第二项的id。ngMolde绑定的即是select的选中值。
ngDisabled
该指令在chrome,firefox的button启用起效,在ie8及以下版本ie浏览器无效。
HTML规范不允许浏览器保存类似selected的布尔值属性。如果我们将一个Angular的插入值表达式转换为这样的属性,那么当浏览器删除该属性时,绑定信息就会丢失。这个指令不被浏览器删除,并且提供了一个永久性的可靠的地方来存储绑定信息。
格式:ng-disabled=”value”
value: boolean类型 判断所在标签是否可用。
使用代码:
相信这三个大家都看的懂,需要注意的也就select后一种写法去绑定select值。
该指令将input,textarea等文本输入设置为只读。
HTML规范不允许浏览器保存类似readonly的布尔值属性。如果我们将一个Angular的插入值表达式转换为这样的属性,那么当浏览器删除该属性时,绑定信息就会丢失。这个指令不被浏览器删除,并且提供了一个永久性的可靠的地方来存储绑定信息。
格式:ng-readonly=“value”
value:表达式 结果为boolean类型
使用代码:
<input type="checkbox" ng-model="checked"><br /> <input type="text" ng-readonly="checked" value="Hello World" />
这个指令用的比较多的地方如编辑资料,但是某些字段是只读的,不让编辑的,这时候就可以设置 ngReadonly=“true”了,并且还是可通过js直接操作,只需要操作的表达式返回值是true/false即可。然后野兽在项目中用到大多在 datetimepicker插件上设置这个指令,只能通过日历选择日期,而不能直接输入来选择。
ngSelected
该指令为select设置了指定的选中值。
HTML规范不允许浏览器保存类似selected的布尔值属性。如果我们将一个Angular的插入值表达式转换为这样的属性,那么当浏览器删除该属性时,绑定信息就会丢失。这个指令不被浏览器删除,并且提供了一个永久性的可靠的地方来存储绑定信息。
格式:ng-selected=“value”
value:表达式 结果是boolean类型。
使用代码:
<input ng-model="checked" type="checkbox" /> <select> <option>Hello</option> <option ng-selected="checked">World</option> </select>
select还有绑定方法,代码如下:
<div ng-app="Demo"> <div ng-controller="testCtrl as ctrl"> <select ng-model="ctrl.getId" ng-options="i.id as i.value for i in ctrl.list"> </select> </div> </div>
(function () { angular.module("Demo", []) .controller("testCtrl", testCtrl); function testCtrl() { var vm = this; vm.list = [{ id: 1, value: "获取1的id" }, { id: 2, value: "获取2的id" }, { id: 3, value: "获取3的id" }]; vm.getId = 2; }; }());
上面的代码运行后自动绑定选中值是第二个选项,是因为ngModel的值是第二项的id。ngMolde绑定的即是select的选中值。
ngDisabled
该指令在chrome,firefox的button启用起效,在ie8及以下版本ie浏览器无效。
HTML规范不允许浏览器保存类似selected的布尔值属性。如果我们将一个Angular的插入值表达式转换为这样的属性,那么当浏览器删除该属性时,绑定信息就会丢失。这个指令不被浏览器删除,并且提供了一个永久性的可靠的地方来存储绑定信息。
格式:ng-disabled=”value”
value: boolean类型 判断所在标签是否可用。
使用代码:
<input type="checkbox" ng-model="checked">控制下面按钮是否可用<br/> <button ng-disabled="checked">我是按钮</button>
相信这三个大家都看的懂,需要注意的也就select后一种写法去绑定select值。
相关文章推荐
- Angular - -ngKeydown/ngKeypress/ngKeyup 键盘事件和鼠标事件
- Angular - - ngCsp、ngFocus、ngBlur、ngForm
- Angular - - ngCloak、ngController、ngInit、ngModel
- Angular - - ngClass、ngClassEven、ngClassOdd、ngStyle
- Angular - - ngChange、ngChecked、ngClick、ngDblclick
- Grunt搭建AngularJS项目
- Angularjs Controller间通信的几种方法
- Angular - - angular.injector、angular.module
- Angular - - Angular数据类型判断
- Angular - - angular.element
- Angular 框架将进入 2.0 时代
- Angular - - angular.equals
- Angular - - angular.forEach、angular.extend
- angularjs+requirejs按需加载
- Angular - - $anchorScroll、$controller、$document
- Angular - - $interval 和 $timeout
- Angular - - $animate
- Angular - - $interpolate 和 $parse
- Angular - - $location 和 $window
- Angular - - $q 承诺与延迟