AngularJs ngReadonly、ngSelected、ngDisabled

简介: ngReadonly 该指令将input,textarea等文本输入设置为只读。 HTML规范不允许浏览器保存类似readonly的布尔值属性。如果我们将一个Angular的插入值表达式转换为这样的属性,那么当浏览器删除该属性时,绑定信息就会丢失。

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" ng-controller="testCtrl as ctrl">
       <select ng-model="ctrl.getId" ng-options="i.id as i.value for i in ctrl.list">
       </select>
  </div>
  (function () {
    angular.module("Demo", [])
    .controller("testCtrl", testCtrl);
    function testCtrl() {
        this.list = [{ id: 1, value: "获取1的id" }, { id: 2, value: "获取2的id" }, { id: 3, value: "获取3的id" }];
        this.getId = 2;
    };
  }());

上面的代码运行后自动绑定选中值是第二个选项,是因为ngModel的值是第二项的id。ngMolde绑定的即是select的选中值。

默认选中还有:

<body ng-app="app" ng-controller="ctrl">
<select name="" ng-model="v">
    <option value="0">0</option>
    <option value="1">1</option>
</select>

<script>
    angular.module('app',[]).controller('ctrl',['$scope',function($scope){
        $scope.v = '1';
    }])
</script>
</body>

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值。

相关文章
|
存储 Java API
阿里高级技术专家谈开源DDD框架:COLA4.1,分离架构和组件(下)
阿里高级技术专家谈开源DDD框架:COLA4.1,分离架构和组件(下)
11540 8
阿里高级技术专家谈开源DDD框架:COLA4.1,分离架构和组件(下)
|
网络安全 Python
IMAP SMTP有什么区别?不同代码示例
IMAP SMTP有什么区别?不同代码示例
算法题解-反转链表
算法题解-反转链表
|
搜索推荐 数据安全/隐私保护
免费、好用、强大的 Markdown 编辑器综合评测和推荐
如今,在编辑器领域,Markdown 大行其道。那么,如何使用 Markdown 语法呢?又如何选择合适的 Markdown 编辑器呢? Markdown 语法的历史与使用 同我们熟悉的 HTML 一样, Markdown 也是一种标记语言。Markdown 的最大、最重要的设计思想是,不需要解释直接看源文件也非常清晰可读。 那么,为什么我要使用 Markdown 语法?这是因为 Markdown 语法通过使用一些约定俗成的标记,实现对于文本内容的快速排版。使用 Markdown 语法,你可以聚焦于内容创作,而不再为排版所分神。此外,如今已经有大量的博客网站、笔记软件、写作软件都已经支持 Ma
2030 0
免费、好用、强大的 Markdown 编辑器综合评测和推荐
|
弹性计算 Ubuntu Unix
阿里云服务器镜像是什么意思?镜像系统怎么选择比较好?
阿里云服务器镜像是什么意思?镜像系统怎么选择比较好?阿里云服务器镜像是云服务器的装机盘,镜像是为云服务器安装操作系统的。云服务器镜像系统怎么选择?云服务器操作系统镜像分为Linux和Windows两大类,Linux可以选择Alibaba Cloud Linux,Windows可以选择Windows Server 2022数据中心版64位中文版。阿里云百科分享什么是镜像以及云服务器镜像系统的选择方法:
592 0
|
虚拟化 网络架构 Linux
|
Web App开发 JavaScript 前端开发
|
关系型数据库 MySQL
|
消息中间件 PHP 开发工具
【AMQP】macOS下的AMQP服务器以及PHP扩展搭建
环境说明 macOS版本, macOS Sierra 10.12.3 (16D32) PHP集成环境, XAMPP 7.0.15-0 Apache 2.4.25, MariaDB 10.
2338 0