В приведенном ниже коде я связал данные массива $scope.data.arraydata с пользовательским разделом mysection.
И для каждого массива я связываю текстовое поле с некоторыми ключами для этого массива.
например. вар1, вар2
Также при добавлении нескольких разделов вышеприведенное работает нормально.
Но когда я пытаюсь получить данные области с помощью приведенного ниже, arraydata внутри $scope.data не связывается со значениями var1 и var2
angular.element(document.getElementById('form')).scope().data
например. Ожидаемый результат (при добавлении 2 разделов)
{
"test":"Single Data",
"arraydata":[
[
{
"var1":"aaa",
"var2":"bbb"
}
],
[
{
"var1":"ccc",
"var2":"ddd"
}
]
]
}
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.data = {
"test": "Single Data",
"arraydata": []
}
$scope.addSection = function () {
$scope.data.arraydata.push([]);
}
$scope.addSection();
});
app.directive('mysection', function () {
return {
restrict: 'E',
scope: {
arrdata: "=?"
},
template: $("#SectionTemplate").html()
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body id="form" ng-app="myApp" ng-controller="myCtrl">
<div>
{{data}}
</div>
<div>
{{ arrdata }}
</div>
<div>
<mysection ng-repeat="arrdata in data.arraydata" ng-model="arrdata"></mysection>
</div>
<button type="button" ng-click="addSection()">Add Section</button>
</body>
<script type="text/ng-template" id="SectionTemplate">
<div style="border: solid 1px red">
{{ arrdata }}
<input type="text" ng-model="arrdata.var1" />
<input type="text" ng-model="arrdata.var2" />
</div>
</script>