zoukankan      html  css  js  c++  java
  • AngularJs 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" 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值。

  • 相关阅读:
    spring管理hibernate,mybatis,一级缓存失效原因
    The constructor ClassPathXmlApplicationContext(String) refers to the missing type BeansException
    idea中Hibernate错误:无法解析表
    使用Dom4解析xml
    关于idea中新建web项目 webapp文件夹没有小蓝点 ,启动服务,访问不到解决方案
    解决VS编译太慢问题
    Entity FrameWork6 Code First带virtual关键字外键 Asp.Net WebApi无法返回实体类数据问题
    webapi请求返回{"$id":"1","Message":"请求的资源不支持 http 方法“GET”。"}
    WPF的BusyIndicator控件只显示遮罩层,不显示提示层问题
    [转]Mysql将数据分组后取出时间最近的数据
  • 原文地址:https://www.cnblogs.com/ys-ys/p/4965108.html
Copyright © 2011-2022 走看看