码迷,mamicode.com
首页 > Windows程序 > 详细

野兽的Angular Api 学习、翻译及理解 - - ngReadonly、ngSelected、ngDisabled

时间:2015-11-14 22:03:38      阅读:850      评论:0      收藏:0      [点我收藏+]

标签:

野兽的 ng api 学习 - - ngReadonly、ngSelected、ngDisabled

 

ngReadonly

该指令将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="demoCtrl">

            <select ng-model="getId" ng-options="i.id as i.value for i in list">

            </select>

        </div>

    </div>

    <script>

        angular.module("Demo", [])

        .controller("demoCtrl", ["$scope", function ($scope) {

            $scope.list = [{ id: 1, value: "获取1的id" }, { id: 2, value: "获取2的id" }, { id: 3, value: "获取3的id" }];

            $scope.getId = 2;

        }])

</script>

上面的代码运行后自动绑定选中值是第二个选项,是因为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 Api 学习、翻译及理解 - - ngReadonly、ngSelected、ngDisabled

标签:

原文地址:http://www.cnblogs.com/ys-ys/p/4965108.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!