angularjs中ng-attr的用法详解


Posted in Javascript onDecember 31, 2016

前言

html中的属性很多,同样可以使用angularjs来定义:

ng-attr-(suffix)=只能使用变量定义

<div title="angularjs中的title">title</div>
<div ng-attr-title="angularjs中的title">title</div><!--这样写显示不出来标题-->
<div ng-attr-title="'angularjs中的title'">title</div><!--这样写显示不出来标题-->
<div ng-attr-title="{{titleStr}}">title</div><!--只能使用变量定义-->
angular.module('myApp',[])
   .controller('myCtrl',['$scope',function($scope){
       $scope.titleStr = "angularjs中的title";
   }]);

ng-bind中使用字符可以将文字显示出来

<span ng-bind=" 'angularjs中的title'  ";

用法实例代码:

<!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>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
Jquery 数据选择插件Pickerbox使用介绍
Aug 24 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
Mar 25 Javascript
jQuery实现平滑滚动到指定锚点的方法
Mar 20 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
Apr 16 Javascript
非常棒的jQuery图片轮播效果
Apr 17 Javascript
javascript汉字拼音互转的简单实例
Oct 09 Javascript
js中setTimeout的妙用--防止循环超时
Mar 06 Javascript
Angular2安装angular-cli
May 21 Javascript
简易Vue评论框架的实现(父组件的实现)
Jan 08 Javascript
axios封装与传参示例详解
Oct 18 Javascript
js动态生成表格(节点操作)
Jan 12 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
Dec 31 #Javascript
Angular JS数据的双向绑定详解及实例
Dec 31 #Javascript
Javascript 实现全屏滚动实例代码
Dec 31 #Javascript
Node.js中如何合并两个复杂对象详解
Dec 31 #Javascript
javascript 闭包详解及简单实例应用
Dec 31 #Javascript
深入理解Angularjs中的$resource服务
Dec 31 #Javascript
BootStrap Fileinput的使用教程
Dec 30 #Javascript
You might like
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
2018/05/29 PHP
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
javascript 上下banner替换具体实现
2013/11/14 Javascript
jQuery表格行上移下移和置顶的实现方法
2015/10/08 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
2016/09/06 Javascript
vue实现可增删查改的成绩单
2016/10/27 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
JavaScript定时器setTimeout()和setInterval()详解
2017/08/18 Javascript
小程序实现发表评论功能
2018/07/06 Javascript
JS获取本地地址及天气的方法实例小结
2019/05/10 Javascript
vue-router路由模式详解(小结)
2019/08/26 Javascript
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
Python使用CMD模块更优雅的运行脚本
2015/05/11 Python
python3实现点餐系统
2019/01/24 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
VICHY薇姿英国官网:全球专业敏感肌护肤领先品牌
2017/07/04 全球购物
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
Auguste The Label官网:澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
医学检验专业大学生求职信
2013/11/18 职场文书
护士的岗位职责
2013/12/04 职场文书
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
借款协议书
2014/04/12 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书
大学迎新生标语
2014/10/06 职场文书
2014年社区工作总结
2014/11/18 职场文书
本科毕业论文指导教师评语
2014/12/30 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书
Python 多线程之threading 模块的使用
2021/04/14 Python
python中sys模块的介绍与实例
2021/04/17 Python