<!DOCTYPE html>

<html lang="zh-CN" ng-app="app">

<head>

    <meta charset="utf-8">

    <title>ng-attr-(suffix)的用法</title>

    <link rel="stylesheet" href="../bootstrap.min.css">

</head>

<body>

    <div>

        <p>1.正确做法：</p>

        <input type="text" ng-model="suffix" placeholder="请输入input的type值">

        （如：checkbox，radio，button，submit...）

        <br><br>

        我将随着输入的值变化：<input ng-attr-type="{{ suffix }}">

    </div>

    <div style="margin-top: 20px;">

        <p>2.错误做法：cx="{{ cx }}"</p>

        <p>这里的错误做法，并非真正的错误做法，只是有时浏览器会对属性会进行很苛刻的限制，所以不建议这样做。比如svg</p>

        <div style="border: 1px solid red;width: 200px;height: 200px;">

            <svg>

                <circle cx="{{ cx }}"></circle>

            </svg>

            这里浏览器会报错

        </div>

        改为：ng-attr-cx="{{ cx }}"

        <div style="border: 1px solid green;width: 200px;height: 200px;">

            <svg>

                <circle ng-attr-cx="{{ cx }}"><circle>

            </svg>

            这里不会报错

        </div>

    </div>

    <script src="../angular.min.js"></script>

    <script>

        angular.module('app', [])

    </script>

</body>

</html>

angularjs中ng-attr的用法的更多相关文章

  1. 详解AngularJS中的filter过滤器用法

    系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点.这 ...

  2. AngularJS 中特性(attr)和属性(prop)的区别

    attr() 和 removeAttr() 方法是对特性进行处理的, 而 prop() 是对属性进行操作的 , 但是很多时候操作的东西是同一个 , 但是也是有区别的, 区别在于prop方法处理的是被 ...

  3. angularjs中ng-repeat-start与ng-repeat-end用法实例

    <!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...

  4. angularjs中provider，factory，service的区别和用法

    angularjs中provider,factory,service的区别和用法 都能提供service,但是又有差别 service 第一次被注入时实例化,只实例化一次,整个应用的生命周期中是个单例 ...

  5. jQuery中attr()方法用法实例

    本文实例讲述了jQuery中attr()方法用法.分享给大家供大家参考.具体分析如下: 此方法设置或返回匹配元素的属性值. attr()方法根据参数的不同,功能也不同. 语法结构一: 获取第一个匹配元 ...

  6. CSS中的content和attr的用法

    问题缘起 在闲看别人网站时发现了这样的代码 <span class="hamburger icon" data-icon="C"> .icon:be ...

  7. thymeleaf中th:attr用法以及相关的thymeleaf基本表达式

    额,有人写的很好,我直接搬了 thymeleaf中th:attr用法 1.写死的单个属性值添加 th:attr="class=btn" 2.写死的多个属性值添加 th:attr=& ...

  8. AngularJS中forEach的用法

    AngularJS中当我们需要遍历某个数组的时候,我们会用到forEach语法.AngularJS中forEach的用法如下: angular.forEach(array,function(obj,i ...

  9. AngularJS中transclude用法详解

    这篇文章主要介绍了AngularJS中transclude用法,详细分析了transclude的具体功能.使用技巧与相关注意事项,需要的朋友可以参考下 本文实例讲述了AngularJS中transcl ...

  10. AngularJS中$interval的用法

    在AngularJS中$interval用来处理间歇性处理一些事情. 最常用的是: var app = angular.module("app",[]); app.controll ...

随机推荐

  1. Python——学习笔记

    list  ['','',''] 类似PHP数组   可以修改 tuple  ('','')  不能修改其中的元素 切片 list[int 开始: int 结束: int 间隔=1] 字符串也可以看成 ...

  2. Callback函数详解（我感觉，回掉函数的本质是函数指针，在业务做循环处理的时候，调用一下通知外部）

    2010年的最后一天了,转载一篇自己认为还不错的文章与大家分享.希望对大家有所帮助. 一,回调函数 我们经常在C++设计时通过使用回调函数可以使有些应用(如定时器事件回调处理.用回调函数记录某操作进度 ...

  3. Intention Locks 意向锁

    Intention Locks 意向锁 InnoDB 支持多颗粒度锁定允许row-level locks和锁整个表共存. 为了使锁在多个颗粒级别实现, 额外类型的锁被称为意向锁是被使用. . Inte ...

  4. vim插件

    所需即所获:像 IDE 一样使用 vim https://github.com/yangyangwithgnu/use_vim_as_ide mark.vim http://www.vim.org/s ...

  5. 安装SQL SERVER2005时，需要win7下安装IIS，记录下

    安装SQL server2005 时,需要先安装IIS,这里描述win7系统下配置IIS的方法. 虽然很多文章都有写过,这里只是重复一下 关键是IIS组件全都勾选上,如果没有全部勾选上,IIS组件没有 ...

  6. HDOJ(HDU) 1862 EXCEL排序(类对象的快排)

    Problem Description Excel可以对一组纪录按任意指定列排序.现请你编写程序实现类似功能. Input 测试输入包含若干测试用例.每个测试用例的第1行包含两个整数 N (<= ...

  7. libevent的简单应用【转载】

    本文转载自: http://blog.csdn.net/liuguanghui1988/article/details/7090531 Libevent的应用主要围绕几大事件:超时事件.信号事件.读/ ...

  8. Scala 编程（一）Scala 编程总览

    Scala 简介 Scala 属于“可伸展语言”,源于它可以随使用者的需求而改变和成长.Scala 可以应用在很大范围的编程任务上,小到脚本大到建立系统均可以. Scala 跑在标准 Java 平台上 ...

  9. mysql oracle静默 一键安装脚本

    pre-read; 为了达到一键搞定的目的!现Ruiy简单做如下几小条规定   如果你想这么一键来搞定请君莫要违背约束! 1. 下载 `二进制` mysql软件介质版本不限,二进制包务必,源码及rpm ...

  10. Flas-SQLAchemy数据库操作使用学习笔记

    Flas-SQLAchemy数据库操作使用学习笔记 Flask-SQLALchemy 是一个给你的应用添加 SQLALchemy 支持的 Flask 扩展.SQLALchemy 是Python语言的S ...