TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超3個贊
可以存在
看我的學(xué)習(xí)測試頁：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="
<script src="
</head> <body> <!--ng-app初始化一個AngularJS應(yīng)用程序，指定應(yīng)用程序名稱--> <!--ng-init初始化應(yīng)用程序數(shù)據(jù)--> <!--ng-model把元素值指定到應(yīng)用程序--> <div data-ng-app="" data-ng-init="firstName='John'"> <p>請在輸入框中嘗試輸入：</p> <p>姓名：<input type="text" data-ng-model="firstName"/></p> <p>您輸入的為：{{firstName}}</p> </div> <hr/> <div id="appsum" data-ng-app="appsum" data-ng-init="quantity=5;price=1.2"> <h2>價格計算器：</h2> 數(shù)量：<input type="text" data-ng-model="quantity"/> 價格：<input type="text" data-ng-model="price"/> <p><b>總價：</b>{{quantity*price}}</p> </div> <hr/> <!--ng-repeat會重復(fù)一個HTML元素--> <div id="apprepeat" data-ng-app="apprepeat" data-ng-init="names=['John','Smith','David']"> <p>使用ng-repeat來重復(fù)元素</p> <ul> <li data-ng-repeat="x in names">{{'當(dāng)前是'+x+'先生值班'}}</li> </ul> </div> <hr/> <!--ng-model指令可以：--> <!--ng-model指令可以為應(yīng)用程序提供類型驗(yàn)證（number,email,required）--> <!--ng-model指令可以為應(yīng)用程序數(shù)據(jù)提供狀態(tài)（invalid,dirty,touched,error）--> <!--ng-model指令可以為HTML元素提供CSS類--> <!--ng-model指令可以綁定HTML元素到HTML表單-->
<!--創(chuàng)建自定義指令--> <div id="appauto" data-ng-app="appauto" data-ng-controller="Ctrl"> <!--標(biāo)簽--> <app-auto></app-auto> <!--屬性--> <div app-auto></div> <!--類名--> <div class="app-auto"></div> <!--注釋--> <!-- directive：app-auto --> <span id="mySpan" data-ng-click="spanClick()">測試</span> </div> </body> </html> |
如上，存在多個ng-app，頁面會自動加載第一個ng-app，后邊的那幾個需要手動加載，方法就是在下面js中調(diào)用angular.bootstrap(document.getElementById('你的應(yīng)用程序所在塊'),['應(yīng)用程序名']);
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <script> var appsum=angular.module('appsum',[]); angular.bootstrap(document.getElementById('appsum'),['appsum']); var apprepeat=angular.module('apprepeat',[]); angular.bootstrap(document.getElementById('apprepeat'),['apprepeat']); var appauto=angular.module('appauto',[]); appauto.directive('appAuto',function(){ return { // restrict限制使用： // A屬性E元素C類名M注釋，默認(rèn)EA restrict:'M', template:'<h1>自定義指令創(chuàng)建</h1>' }; }); appauto.controller('Ctrl',function($scope){ $scope.spanClick=function(){ $('#mySpan').hasClass('spanClickStyle')?$('#mySpan').removeClass('spanClickStyle'):$('#mySpan').addClass('spanClickStyle'); } }) angular.bootstrap(document.getElementById('appauto'),['appauto']); </script> <style> .spanClickStyle{ color: white; background-color: red; } </style> |
TA貢獻(xiàn)1911條經(jīng)驗(yàn) 獲得超7個贊
$scope.all=function(){
var t=0;
for(var i=0;i<$scope.data.length;i++){
t+=$scope.data[i].m_num*$scope.data[i].m_price;
}
return t;
}
TA貢獻(xiàn)1842條經(jīng)驗(yàn) 獲得超13個贊
可以的
但是AngularJs默認(rèn)只加載一個ng-app，并且是第一個，比如：
<div ng-app>
<input ng-model="name" type="text" placeholder="請輸入姓名">
<p>我的姓名： {{name}}</p>
</div>
<div ng-app>
<input ng-model="age" type="number" placeholder="請輸入年齡">
<p>我的年齡: {{age}}</p>
</div>
或者即使是ng-app加了名字也一樣：
<div ng-app>
<input ng-model="name" type="text" placeholder="請輸入姓名">
<p>我的姓名： {{name}}</p>
</div>
<div ng-app>
<input ng-model="age" type="number" placeholder="請輸入年齡">
<p>我的年齡: {{age}}</p>
</div>
舉報