首页 > 代码库 > angularjs中ngAttr的用法

angularjs中ngAttr的用法

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

 

angularjs中ngAttr的用法