一、關於ng-repeat的作用域學習:
1、ng-repeat會在上一級作用域名中創建一個子 作用域。
2、此時如果需要在子作用域中調用父作用域的變量,則可以使用$parent.variableName來調用。
3、ng-repeat中調用和父作用域同名的變量,無$parent前綴則指的是調用的子作用域的變量,就像局部變量一樣。
4、ng-repeat中的$index: element in elements 當前element在elements中的下標數。例如第一個element,則$index=0.
二、代碼效果
三、詳細代碼
1 <DOCTYPE html> 2 <html ng-app="app"> 3 <head> 4 <meta charset="utf-8"/> 5 <title>ng-repeat</title> 6 <script src="jquery-1.10.2.min.js"></script> 7 <script src="angular.min.js"></script> 8 </head> 9 <body > 10 <h1>scope</h1> 11 <div ng-controller="ParentCtrl" > 12 ParentCtrl:<br/> 13 父scope的countrywaibu:{{countrywaibu}}<br/> 14 父scope的countries:<br/>{{countries|json}} 15 <ul> 16 <li ng-repeat="countrywaibu in countries">ng-repeat:<br/> 17 child 中調用父scope的$parent.countrywaibu :{{$parent.countrywaibu}}<br/> 18 child中與父scope同名的countrywaibu的countrywaibu.name: <input type="text" ng-model="countrywaibu.name"></input> 19 <span>{{countrywaibu.name}}</span><br/> 20 <button ng-click="remove($index)" >移除countries中的當前元素</button> 21 </li> 22 </ul> 23 </div> 24 25 <script type="text/javascript" chartset="utf-8"> 26 // the controller 27 var app=angular.module('app',[]); 28 app.controller('ParentCtrl',function($scope){ 29 $scope.countrywaibu="waibu"; 30 $scope.population = 7000; 31 $scope.countries = [ 32 {name: 'France', population: 63.1}, 33 {name: 'United Kingdom', population: 61.8} 34 ]; 35 $scope.remove = function(index) { 36 //刪除index下標的某個元素 37 $scope.countries.splice(index, 1); 38 } 39 }); 40 </script> 41 42 </body> 43 </html>