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 相关文章推荐
Sample script that deletes a SQL Server database
Jun 16 Javascript
JQuery验证工具类搜集整理
Jan 16 Javascript
jQuery控制输入框只能输入数值的小例子
Mar 20 Javascript
60个很实用的jQuery代码开发技巧收集
Dec 15 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 Javascript
jQuery实现html元素拖拽
Jul 21 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
js事件源window.event.srcElement兼容性写法(详解)
Nov 25 Javascript
assert()函数用法总结(推荐)
Jan 25 Javascript
Vue打包后访问静态资源路径问题
Nov 08 Javascript
uniapp与webview之间的相互传值的实现
Jun 29 Javascript
vue 授权获取微信openId操作
Nov 13 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的库,结果发现很多东西
2006/12/31 PHP
网页游戏开发入门教程二(游戏模式+系统)
2009/11/02 PHP
利用php绘制饼状图的实现代码
2013/06/07 PHP
PHP中加密解密函数与DES加密解密实例
2014/10/17 PHP
PHP使用strstr()函数获取指定字符串后所有字符的方法
2016/01/07 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
node.js中的buffer.slice方法使用说明
2014/12/10 Javascript
js进行表单验证实例分析
2015/02/10 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
javascript基本常用排序算法解析
2017/09/27 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
vue组件间的参数传递实例详解
2019/04/26 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
2020/07/28 Javascript
[01:29:42]Liquid vs VP Supermajor决赛 BO 第一场 6.10
2018/07/05 DOTA
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python解析json实例方法
2013/11/19 Python
详解python 发送邮件实例代码
2016/12/22 Python
Python字典遍历操作实例小结
2019/03/05 Python
Python 爬虫实现增加播客访问量的方法实现
2019/10/31 Python
python实现按首字母分类查找功能
2019/10/31 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
电大毕业生自我鉴定
2013/11/10 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书
详解nginx进程锁的实现
2021/06/14 Servers
总结Python连接CS2000的详细步骤
2021/06/23 Python
一条慢SQL语句引发的改造之路
2022/03/16 MySQL
Python实现仓库管理系统
2022/05/30 Python