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面向对象之Javascript 继承
May 04 Javascript
jquery $.ajax()取xml数据的小问题解决方法
Nov 20 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
Jan 04 Javascript
Knockout数组(observable)使用详解示例
Nov 15 Javascript
javascript实现简单的省市区三级联动
May 14 Javascript
js实现温度计时间样式代码分享
Aug 21 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 Javascript
Vue组件和Route的生命周期实例详解
Feb 10 Javascript
Vue实现按钮旋转和移动位置的实例代码
Aug 09 Javascript
vue项目中使用Svg的方法
Oct 24 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
Feb 01 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
Jun 11 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文件上传的例子及参数详解
2013/12/12 PHP
php使用curl模拟浏览器表单上传文件或者图片的方法
2018/11/10 PHP
form中限制文本字节数js代码
2007/06/10 Javascript
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
js为空或不是对象问题的快速解决方法
2013/12/11 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
2014/08/15 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
2016/09/06 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
详解webpack+gulp实现自动构建部署
2017/06/29 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
python输入错误密码用户锁定实现方法
2017/11/27 Python
sublime python3 输入换行不结束的方法
2018/04/19 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
Python实现自动签到脚本的示例代码
2020/08/19 Python
python制作抽奖程序代码详解
2021/01/15 Python
彪马英国官网:PUMA英国
2019/02/11 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
开办饭店创业计划书
2013/12/28 职场文书
可口可乐广告词
2014/03/20 职场文书
四议两公开实施方案
2014/03/28 职场文书
小学生中国梦演讲稿
2014/04/23 职场文书
大学生通用个人自我评价
2014/04/27 职场文书
小学安全工作总结2015
2015/05/18 职场文书
环保建议书范文
2015/09/14 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers