Angularjs 在ng repeat循环内从子控制器操纵父控制器数组_Angularjs_Angularjs Scope_Angularjs Ng Repeat

Angularjs 在ng repeat循环内从子控制器操纵父控制器数组

angularjs

Angularjs 在ng repeat循环内从子控制器操纵父控制器数组,angularjs,angularjs-scope,angularjs-ng-repeat,Angularjs,Angularjs Scope,Angularjs Ng Repeat,我想操作存储在父控制器中的数组中的项。当我操作这些项时，我希望在子控制器内的ng repeat循环中执行此操作据我所知，父控制器中的数组正在更新-事实上s===cs。我已经读到，$scope.$apply（）可能是答案，但我不确定如何使用下面的“控制器as”语法调用它，或者这是否明智 <html ng-app='app'> <body ng-controller='parent_controller as pc'> {{ pc.parent_name }}

我想操作存储在父控制器中的数组中的项。当我操作这些项时，我希望在子控制器内的ng repeat循环中执行此操作

据我所知，父控制器中的数组正在更新-事实上

s===cs

。我已经读到，

$scope.$apply（）

可能是答案，但我不确定如何使用下面的“

控制器as

”语法调用它，或者这是否明智

<html ng-app='app'>
<body ng-controller='parent_controller as pc'>
    {{ pc.parent_name }}
    <br>
    Enter parent_name <input ng-model='pc.parent_name'/>
    <br>
    <button ng-click='pc.change_parent_name()'>change parent_name</button>

    <div ng-controller='child_controller as cc'>
        <div ng-repeat='item in pc.myarray' style='border:1px solid #ccc; margin:20px;'>
            Item = {{ item }}
            <br>
            <button ng-click='cc.change_item_name($index)'>change item name</button>
        </div>
    </div>

<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script type='text/javascript'>

var app = angular.module('app',[]);

function parent_controller(){
    var self = this;
    window.s = self; // For debugging

    self.myarray = ['a','b','c'];

    self.change_parent_name = function () {
        self.parent_name = 'changed!!';
    }
}
app.controller('parent_controller',[parent_controller]);

function child_controller() {
    var self = this;    
    window.cs = self; // For debugging

    parent_controller.apply(self, arguments);

    self.change_item_name = function(index){
        console.log(index);
        self.myarray[index] = 'changed';
    }

}
app.controller('child_controller',[child_controller]);

</script>
</body>
</html>


{{pc.parent_name}


输入父项名称


更改父项名称
Item={{Item}


更改项目名称
var-app=angular.module（'app'，[]）；
函数父级_控制器（）{
var self=这个；
window.s=self；//用于调试
self.myarray=['a'，'b'，'c']；
self.change\u parent\u name=函数（）{
self.parent_name='changed！！'；
}
}
应用程序控制器（'父控制器'，[父控制器]）；
函数子控制器（）{
var self=这个；
window.cs=self；//用于调试
父控制器。应用（自身、参数）；
self.change\u item\u name=函数（索引）{
控制台日志（索引）；
self.myarray[index]=“已更改”；
}
}
应用控制器（‘子控制器’，【子控制器】）；

您最好将子控制器放在ng repeat上，然后使用它来更新父控制器$范围。$apply不是必需的。如果要从控制器代码更新父控制器，最好使用服务在两者之间进行通信。

由于数组具有基本字符串类型，请将父数组和索引传递到子控制器函数中，它应该可以正常工作

 self.change_item_name = function(items, index){
        console.log(index);
        items[index] = 'changed';
    }

html将更改为：

更改项目名称

将数据源从父控制器移动到服务，并将该服务注入到两个控制器中，允许它们访问相同的数据。[]

此示例执行此操作，并添加第三个控制器以突出显示跨控制器共享数据的程度

下面的ctrl_3还显示了如何使用

controller as

语法访问$scope$作用域仅用于console.log部分-它不用于此服务方法

<html ng-app='app'>
<body ng-controller='a_controller as ctrl_1'>
    {{ ctrl_1.parent_name }}
    <br>
    Enter parent_name <input ng-model='ctrl_1.parent_name'/>
    <br>
    <button ng-click='ctrl_1.change_parent_name()'>change parent_name</button>

    <div><strong>ctrl_2</strong></div>
    <div ng-controller='a_controller as ctrl_2'>
        <div ng-repeat='item in ctrl_2.myarray' style='border:1px solid #ccc; margin:20px;'>
            Item = {{ item }}
            <br>
            <button ng-click='ctrl_2.change_item_name(ctrl_2.myarray, $index)'>change item name</button>
        </div>
    </div>

    <!-- an extra repeat of the myarray, this time using ctrl_1 for the repeat of myarray but ctrl_3 as the controller, just to show it all ties back to the same data source -->
    <hr>
    <div><strong>ctrl_3</strong></div>
    <div ng-controller='a_controller as ctrl_3'>
        <div ng-repeat='item in ctrl_1.myarray' style='border:1px solid #ccc; margin:20px;'>
            Item = {{ item }}
            <br>
            <button ng-click='ctrl_3.change_item_name(ctrl_3.myarray, $index)'>change item name</button>
        </div>
    </div>


<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js'></script>
<script type='text/javascript'>

angular.module('app',[])
.factory('DataService', [function() {
    data = [ {'a':1}, {'b':2}, {'c':3} ];

    return {
        myarray : data
    }
}])
.controller('a_controller', ['DataService', '$scope', function(DataService, $scope) {
    var self = this;
    window.s = self; // For debugging
    console.log($scope);

    self.myarray = DataService.myarray;

    self.change_parent_name = function () {
        self.parent_name = 'changed!!';
    }

    self.change_item_name = function(array,index){ 
        array[index] = {'changed': 999}; 
    }
}]);


</script>
</body>
</html>


{{ctrl_1.parent_name}


输入父项名称


更改父项名称
ctrl\u 2
Item={{Item}


更改项目名称

ctrl\u 3
Item={{Item}


更改项目名称
角度.module（'app'，[]）
.factory（'DataService'，[function（））{
数据=[{'a'：1}，{'b'：2}，{'c'：3}]；
返回{
myarray：数据
}
}])
.controller（'a_controller'，['DataService'，'$scope'，函数（DataService，$scope）{
var self=这个；
window.s=self；//用于调试
console.log（$scope）；
self.myarray=DataService.myarray；
self.change\u parent\u name=函数（）{
self.parent_name='changed！！'；
}
self.change\u item\u name=函数（数组，索引）{
数组[索引]={'changed'：999}；
}
}]);

Ahh该死。我简化了我的示例，忘记了引用与值的关系。进行您提到的更改允许一个按钮更改项目名称，但按其他按钮会出现错误：[ngRepeat:dups]。你知道为什么会这样吗？我还尝试将myarray更改为保存对象而不是字符串（我更感兴趣的是字符串），但它根本不起作用（但没有重复错误：-P）重复错误是因为ng repeat需要唯一标识元素，对于对象，它通过向其添加键来实现。如果使用object，它应该可以工作。你是如何使用基于对象的方法的。啊，是的，当然。self.myarray=[{'a'：1}，{'b'：2}，{'c'：3}]。。。。及。。。。。self.change_item_name=function（index）{console.log（index）；self.myarray[index]={'changed'：999}；}据我所知，myarray是在父控制器上定义的，所以您无法从子控制器获取它。尝试

函数（数组，索引）{array[index]={…}；