Здравствуйте, недавно начала изучать angularjs и столкнулась с трудностью. Создала отдельный компонент для формы некой сущности (поля: объект, субъект, действие, параметры). При нажатии на кнопку Сохранить, объект этой сущности должен сохраняться в коллекции и выводиться в списке ниже. Но список в template обновляться не хочет и не могу понять почему. Прикладываю код контроллера и шаблона.
Контроллер:
'use strict';
angular.
module('usecaseForm').
component('usecaseForm', {
templateUrl: 'usecase-form/usecase-form.template.html',
controller: function UsecaseFormController() {
var ctrl = this;
ctrl.usecases = new Set();
ctrl.usecase = {
object: '',
subject: '',
action: '',
parameters: []
}
ctrl.addUsecase = function() {
ctrl.usecases.add({
object: ctrl.usecase.object,
subject: ctrl.usecase.subject,
action: ctrl.usecase.action,
parameters: ctrl.usecase.parameters
})
ctrl.usecase.object = '';
ctrl.usecase.subject = '';
ctrl.usecase.action = '';
ctrl.usecase.parameters = '';
console.log(ctrl.usecases);
}
ctrl.addParam = function() {
ctrl.usecase.parameters.push(
ctrl.usecase.parameter
);
}
}
})
Шаблон:
<div class="lg-col-6">
<form novalidate ng-submit="$ctrl.addUsecase()">
<label>Object: <input type="text" ng-model="$ctrl.usecase.object" /></label><br />
<label>Subject: <input type="text" ng-model="$ctrl.usecase.subject" /></label><br />
<label>Action: <input type="text" ng-model="$ctrl.usecase.action" /></label><br />
<label>Parameter:
<input type="text" ng-model="$ctrl.usecase.parameter" /></label>
<input type="button" value="Add param" ng-click="$ctrl.addParam()"/><br />
<select size="5" style="width: 30%">
<option ng-repeat="param in $ctrl.usecase.parameters track by $index">
{{param}}
</option>
</select><br />
</label>
<input type="submit" value="Save" />
</form>
<ul>
<li ng-repeat="usecase in $ctrl.usecases track by $index">
{{usecase}}
</li>
</ul>
</div>
ctrl.usecase.parameters = ctrl.usecase.parameters.concat( ctrl.usecase.parameter )
;