AngularJS中ng-repeat使用心得

阿新 • • 發佈：2019-01-31

ng-repeat這樣類似的指令是會建立一個新的作用域的，並且建立的新的作用域是原型繼承的。這點其實和我的一篇《AngularUI之Modal的子作用域研究》類似，這次我也對指令的子作用域進行了研究，發現他們的建立子作用的方式是一樣的。
下面是我的實驗程式碼：

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/angular.min.js" 
></script>
</head>
<body>
    <div ng-controller="MyController">
        <input type="text" ng-model="commentContent"/>
        <input type="text" ng-model="cup.color"/>
        <div ng-repeat="name in names">
            <span>{{name.firstName}}</span 
>
            <span>{{name.lastName}}</span>
            <input type="text" ng-model="commentContent"/>
            <input type="text" ng-model="cup.color"/>
        </div>
    </div>
    <script>
        var app = angular.module("app",[]);
        app.controller("MyController" 
,function($scope){
            $scope.commentContent = "aaa";
            $scope.cup = { color: "green"};
            $scope.trees = [{},{}];
            $scope.names = [{firstName:"john",lastName:"tech"},{firstName:"jack",lastName:"boom"}];
            $scope.end = "happy ending";
            $scope.name = {firstName:"aaa",lastName:"bbb"};
            $scope.changeParent = function(event){
                var keyCode = window.event?event.keyCode:event.which;
                if(keyCode == 13){
                    $scope.commentContent = "bbb";
                };
            };
        });
    </script>
</body>
</html>

得出的結論是：
ng-repeat這樣類似的指令建立的子作用域，基本型別的變數是值傳遞，物件和陣列是地址傳遞。也就是說，ng-repeat建立的子作用域會繼承父作用域的值和物件，如果對子作用域繼承的基本型別變數修改，父作用域的值不會改變，對子作用域繼承的物件和陣列進行修改，父作用域的值也會跟著改變。

AngularJS中ng-repeat使用心得

AngularJS中ng-repeat使用心得

AngularJS中ng-repeat渲染完成事件和中間變數的引用

解決AngularJS中ng-repeat不更新檢視的問題

Angularjs中ng-repeat與移動端滑動外掛iScroll的衝突

AngularJS中 ng-repeat 排序後的 $index變化

angularJs中ng-repeat遍歷動態生成的表單元素繫結ng-model無效的問題

關於AngularJS中ng-repeat問題（問卷遍歷問題）

AngularJS的ng-repeat迴圈中如何獲得被迴圈列表的索引值

AngularJs 在ng-repeat中動態使用ng-model進行雙向資料繫結

AngularJS 中ng-model通過$watch動態取值

AngularJS 獲取ng-repeat的動態ng-model

AngularJS中ng-class使用方法

AngularJS中ng-options實現下拉列表的資料繫結

Angularjs中ng-select和ng-options用法【select聯動資料】

angularjs（ng-repeat和filter）生成多級選單

angularJS指令ng-repeat生成的dom元素js獲取不到

AngularJS中ng-class的用法總結

AngularJS中ng-include指令實現頭部和尾部的共用

【AngularJS】Angularjs設定ng-repeat裡面迴圈出來的select的預設值

AngularJs使用ng-repeat實現資料迴圈展示的效果

AngularJS中ng-repeat使用心得

相關推薦