angularjs中ng-attr的用法详解

2024-10-25 14:51:20

前言

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中setAttribute用法介绍

setAttribute(string name, string value):增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值.1.样式问题setAttribute("class", value)中class是指改变"class"这个属性,所以要带引号.vName代表对样式赋值.例如: 复制代码代码如下: var input = document.createElement("input");input.setAttribut
JS中Attr的用法详解

具体代码如下所示: <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#btn").click(function(){ //使用attr(name)获取属性值: alert(
javascript中setAttribute兼容性用法分析

本文实例分析了javascript中setAttribute兼容性用法.分享给大家供大家参考,具体如下: 1:常规属性建议使用 node.XXXX. 2:自定义属性建议使用node.getAttribute("XXXX"). 3:当获取的目标是JS里的关键字时建议使用node.getAttribute("XXX"),如label中的for. 4:当获取的目标是保留字,如:class,请使用className代替. setAttribute(string name,
Oracle中游标Cursor基本用法详解

查询 SELECT语句用于从数据库中查询数据,当在PL/SQL中使用SELECT语句时,要与INTO子句一起使用,查询的返回值被赋予INTO子句中的变量,变量的声明是在DELCARE中.SELECT INTO语法如下: SELECT [DISTICT|ALL]{*|column[,column,...]} INTO (variable[,variable,...] |record) FROM {table|(sub-query)}[alias] WHERE............ PL/SQL
AngularJS中filter的使用实例详解

AngularJS中filter的使用实例详解一.格式化数字为货币格式. <div>{{money|currency:"$"}}</div> <div>{{money|currency:"RMB"}}</div> script: app.controller("crl", function($scope, $filter) { $scope.money="4545"; });
JSP中EL表达式的用法详解(必看篇)

EL 全名为Expression Language EL 语法很简单,它最大的特点就是使用上很方便.接下来介绍EL主要的语法结构: ${sessionScope.user.sex} 所有EL都是以${为起始.以}为结尾的.上述EL范例的意思是:从Session的范围中,取得用户的性别.假若依照之前JSP Scriptlet的写法如下: User user =(User)session.getAttribute("user"); String sex =user.getSex( );
oracle数据库中sql%notfound的用法详解

SQL%NOTFOUND 是一个布尔值.与最近的sql语句(update,insert,delete,select)发生交互,当最近的一条sql语句没有涉及任何行的时候,则返回true.否则返回false.这样的语句在实际应用中,是非常有用的.例如要update一行数据时,如果没有找到,就可以作相应操作.如: begin update table_name set salary = 10000 where emp_id = 10; if sql%notfound then insert into
AngularJS中的拦截器实例详解

AngularJS中的拦截器实例详解异步操作有时候需要在拦截器中做一些异步操作.幸运的是, AngularJS 允许我们返回一个 promise 延后处理.它将会在请求拦截器中延迟发送请求或者在响应拦截器中推迟响应. 下面是项目中用到的代码. ZbtjxcApp.factory('myHttpInterceptor', ['$q', '$window','$location', function($q, $window,$location) { return { // 全局响应 'respo
JavaScript中的splice方法用法详解

JavaScript中的splice主要用来对js中的数组进行操作,包括删除,添加,替换等. 注意:这种方法会改变原始数组!. 1.删除-用于删除元素,两个参数,第一个参数(要删除第一项的位置),第二个参数(要删除的项数) 2.插入-向数组指定位置插入任意项元素.三个参数,第一个参数(插入位置),第二个参数(0),第三个参数(插入的项) 3.替换-向数组指定位置插入任意项元素,同时删除任意数量的项,三个参数.第一个参数(起始位置),第二个参数(删除的项数),第三个参数(插入任意数量的项) 示例:
对pandas中apply函数的用法详解

最近在使用apply函数,总结一下用法. apply函数可以对DataFrame对象进行操作,既可以作用于一行或者一列的元素,也可以作用于单个元素. 例:列元素行元素列行以上这篇对pandas中apply函数的用法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: 浅谈Pandas中map, applymap and apply的区别
Python3网络爬虫中的requests高级用法详解

本节我们再来了解下 Requests 的一些高级用法,如文件上传,代理设置,Cookies 设置等等. 1. 文件上传我们知道 Reqeuests 可以模拟提交一些数据,假如有的网站需要我们上传文件,我们同样可以利用它来上传,实现非常简单,实例如下: import requests files = {'file': open('favicon.ico', 'rb')} r = requests.post('http://httpbin.org/post', files=files) print
PyTorch中反卷积的用法详解

pytorch中的 2D 卷积层和 2D 反卷积层函数分别如下: class torch.nn.Conv2d(in_channels, out_channels, kernel_size, stride=1, padding=0, groups=1, bias=True) class torch.nn.ConvTranspose2d(in_channels, out_channels, kernel_size, stride=1, padding=0, output_padding=0, b

angularjs中ng-attr的用法详解

相关推荐

随机推荐