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 相关文章推荐
面向对象的javascript(笔记)
Oct 06 Javascript
JavaScript中的16进制字符(改进)
Nov 21 Javascript
js String对象中常用方法小结(字符串操作)
Jan 27 Javascript
微信小程序 教程之数据绑定
Oct 18 Javascript
JavaScript常用正则函数用法示例
Jan 23 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
JS判断时间段的实现代码
Jun 14 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
JS实现动态生成html table表格的方法分析
Jul 11 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 Javascript
JS如何在数组指定位置插入元素
Mar 10 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
老照片 - 几十年前的收音机与人
2021/03/02 无线电
谈谈PHP语法(5)
2006/10/09 PHP
ajax实现无刷新分页(php)
2010/07/18 PHP
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
php数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
利用PHP命令行模式采集股票趋势信息
2016/08/09 PHP
PHP中list方法用法示例
2016/12/01 PHP
php实现微信企业付款到个人零钱功能
2018/10/09 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
图片格式的JavaScript和CSS速查手册
2007/08/20 Javascript
js实现图片轮换效果代码
2013/04/16 Javascript
使用CSS3的scale实现网页整体缩放
2014/03/18 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
js实现同一页面多个运动效果的方法
2015/04/10 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
Bootstrap 按钮样式与使用代码详解
2018/12/09 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
关于vue状态过渡transition不起作用的原因解决
2019/04/09 Javascript
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python列表推导式的使用方法
2013/11/21 Python
python paramiko模块学习分享
2017/08/23 Python
一个Python最简单的接口自动化框架
2018/01/02 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
python绘制直方图和密度图的实例
2019/07/08 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
Python request操作步骤及代码实例
2020/04/13 Python
python 错误处理 assert详解
2020/04/20 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
opencv 查找连通区域 最大面积实例
2020/06/04 Python
最新奶茶店创业计划书范文
2014/02/08 职场文书
中学生寄语大全
2014/04/03 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
领导欢送会主持词
2015/07/06 职场文书