Angular - - ngChange、ngChecked、ngClick、ngDblclick


ngChange

当用户更改输入时,执行给定的表达式。表达式是立即进行执行的,这个和javascript的onChange事件的只有在触发事件的变化结束的时候执行不同。

格式:ng-change=”value”

value: 表达式。

使用代码:

  <div ng-app="Demo">
    <div ng-controller="testCtrl as ctrl">
        <input ng-change="ctrl.fn()" ng-model="ctrl.inputValue" />
    </div>
  </div>
  (function () {
    angular.module("Demo", [])
    .controller("testCtrl", testCtrl);
    function testCtrl() {
        var vm = this;
        vm.fn = function () {
          console.log(vm.inputValue);
      };
    };
  }());

这个指令就是对输入的值做个监听,当发现值变化的时候,你需要让我做什么操作我就做什么操作咯。

ngChecked

HTML规范不允许浏览器保持boolean值属性,就像checked。(他们存在是true,不存在即为false)如果我们将一个 Angular表达式转换为这样一个属性,那么绑定的信息将会在浏览器移除这个属性的时候消失。ngChecked 指令解决了checked这个属性的问题。这个补充的指令不会被浏览器移除,并且提供一个永久可靠的地方来存储绑定的信息。

格式: ng-checked=“value”

value:表达式 结果是个boolean类型

使用代码:

  <input type="button" ng-click="isChecked = !isChecked" value="toggle" />
  <input type="checkbox" ng-checked="isChecked" />

偷偷的说下,这个指令在做选择配置的时候挺有用的哦。

ngClick

ngClick指令允许当一个元素被点击后执行指定的表达式。

格式:ng-click=“value“

value:表达式

使用代码:

  <input type="button" value="add-count" ng-click="count=count+1" ng-init="count=0;" />{{count}}

鼠标单击事件,不用多说。

ngDblclick

ngDblclick指令允许你在dblclick事件上执行指定的表达式。

格式:ng-dblclick=“value”

value:表达式

使用代码:

  <input type="button" value="add-count" ng-dblclick="count=count+1" ng-init="count=0;" />{{count}}

鼠标双击事件,无需解释

优质内容筛选与推荐>>
1、websocket 入门
2、c# new三种用法
3、《分析服务从入门到精通读书笔记》第四章、创建时间维度(5)
4、Primes
5、Adeneo Embedded: Building Qt 5.1 for Freescale i.MX6Introduction on LTIB


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号





    联系我们

    欢迎来到TinyMind。

    关于TinyMind的内容或商务合作、网站建议,举报不良信息等均可联系我们。

    TinyMind客服邮箱:support@tinymind.net.cn