の結合、私は単純なコンポーネントを作成し破壊します。入力は配列にバインドされ、ボタンのクリック配列は変更されます。入力は、双方向のAngularJS
残念ながら、コンポーネントは変な動作をします。式（{{$ctrl.someArray}}）は更新されますが、入力値は変わりません。
一方、ユーザーが入力値を変更すると、式が正しく変更されます。
エラーはスローされず、何もありません。
this.someArray.forEach(function (part, index, array) {
//somelogic
array[index] = array[index] + " (foo)";
});
それはようです：それは問題は、アレイが更新される方法にあり
...でも、データフローの一方向結合が、珍しいブロックではありませんAngularJSは、このような配列の変更を検出しません。ソリューションは非常に簡単です：
var module = angular.module('myApp',[]);
module.component('componentName', {
controller: function SomeCtrl() {
this.foo = function (event, array) {
this.someArray.forEach(function (part, index, array) {
//somelogic
// array[index] ={'no':array[index].no+ " foo"};
console.log(array[index] ={'no':array[index].no+ " foo"});
});
}
},
template: `<div class="input-group">
<input type="text" ng-repeat="some in $ctrl.someArray" class="form-control" ng-model="some.no" /><br>{{$ctrl.someArray}}
<button class="btn btn-default" ng-click="$ctrl.foo($event, $ctrl.someArray)">
Okay
</button>
</div>`,
bindings: {
someArray: '=',
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<body ng-app="myApp">
<div ng-init="arrays=[{'no':'1'},{'no':'2'},{'no':'3'},{'no':'4'},{'no':'5'}]">
<component-name some-array="arrays"></component-name>
</div>
</body>
プランナー/フィドルを作成できますか？ – tanmay