angularJS：ng-repeat做用域及父做用域調用$parent

時間 2019-11-19

標籤 angularjs repeat 調用 parent 欄目 AngularJS 简体版

原文原文鏈接

1、關於ng-repeat的做用域學習：javascript

一、ng-repeat會在上一級做用域名中建立一個子做用域。html

二、此時若是須要在子做用域中調用父做用域的變量，則能夠使用$parent.variableName來調用。java

三、ng-repeat中調用和父做用域同名的變量，無$parent前綴則指的是調用的子做用域的變量，就像局部變量同樣。jquery

四、ng-repeat中的$index： element in elements 當前element在elements中的下標數。例如第一個element，則$index=0.json

2、代碼效果app

3、詳細代碼dom

 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。