zoukankan      html  css  js  c++  java
  • Angular双向数据绑定

    1. directives中的=、@、&

       = 双向数据绑定,一般传ngModel,指令中的属性值为对应的scope值

       @ string类型,html中字面量/直接量,可以是ngModel中对象里面的单个属性的名字, 单文本绑定, 这个属性的值必须是父级作用域中的

       & 传函数,一般在onChange上用,在父scope中执行函数

    2. RestAngular

      如果Restangular接收的值不是实体,则this.customPOST info, 'info'

      若是实体,则this.all('list').getList(params)或者this.one('one', id).get()

    3. ng-show/ng-hide 与 ng-if 的区别: ng-if 会移除dom,生成dom,而ng-show只是改变其display属性, 具体说它不是通过CSS显示或隐藏DOM节点,而是删除或者新增结点。当一个元素被ng-if从DOM中移除,同它关联的作用域也会被销毁。而且当它重新加入DOM中时,会通过原型继承从它的父作用域生成一个新的作用域。

    <html ng-app>
    <head>
        <script src="angular-1.2.25.js"></script>  
        <script>
            function myController($scope)
            {
                $scope.key = "";
            }
        </script>
    </head>
    <body ng-controller="myController"> 
      <input type="text" ng-model="key">
      <input type="button" value="clear" ng-click="keyworld=''" ng-show="key !='' ">
    </body>
    这段代码默认情况下clear按钮不显示;当在text中输入内容时,clear按钮会显示;点击clear按钮时,会清空text中的内容,同时隐藏clear按钮。
    如果将ng-show改成ng-if,点击clear按钮的时候,不能清空text中的内容,也不能隐藏clear按钮。这是因为ng-if会新建或者销毁作用域

    4. ng-class="{样式1 : 条件1, 样式2: 条件2, 样式3: 条件, ...}"

    5. ng-click="function"

    6. ng-model 一般用于可输入的框上

        {{data}}用于展示, ng-bind替换{{}}可以解决花括号闪烁问题

    7. {{判断}} => {{a? a: ''}}

    8. ng-disabled

    9. ng-repeat= "box in boxList track by $index"

    10. ng-href="url"

    11. 过滤器: {{100000 | currency}} => 100,000.00; {{100000 | number}} => 100,000; {{1458913934000 | date: "yyyy-MM-dd"}}; {{'hello' | translate}}

    12. translate=model和字符串: translate="statistics_{{a}}_child_total"; {{'statistics_' + a + '_child_total' | translate}}

      coffee中filter加translate: $filter('translate')('fee_structure_free_first_year')

      {{translate}}拼接: "child_count_tip": "共{{total}}人","child_count_tip": "Total count: {{total}}",  {{'child_count_tip' | translate: {'total': child.totalItems} }}

  • 相关阅读:
    记一次CTF比赛过程与解题思路MISC部分
    使用requests爬虫遇到的一个奇葩的问题:UnicodeEncodeError: 'latin1' codec can't encode character
    纯前端实现词云展示+附微博热搜词云Demo代码
    亚马逊精细化选品服务
    乔布斯访谈笔记
    使用腾讯云轻量级服务器
    centos 设置阿里的yum源
    云未来、新可能 绿色、无处不在、可信的计算
    OpenKruise v1.0:云原生应用自动化达到新的高峰
    服务发现与配置管理高可用最佳实践
  • 原文地址:https://www.cnblogs.com/floraCnblogs/p/angualr-summary.html
Copyright © 2011-2022 走看看