0

Здравствуйте, недавно начала изучать 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>
2
  • проблема может быть в используемом методе push. Попробуй вместо него concat: ctrl.usecase.parameters = ctrl.usecase.parameters.concat( ctrl.usecase.parameter );
    – Grundy
    22 апр 2018 в 17:25
  • Дало тот же результат. Не выводит в шаблон.
    – Yumie
    22 апр 2018 в 20:08

1 ответ 1

1

Дело в том, что angularjs не умеет работать с Set.

У вас есть три варианта:

  1. Не использовать Set, использовать простой массив. На мой взгляд - самый лучший вариант.
  2. Не использовать Set при ng-repeat. Преобразовывать Set в массив. Это можно сделать разными путями, используя пайп, в шаблоне преобразовать или в контроллере.
  3. Создать собственную директиву на основе ng-repeat, которая будет уметь использовать Set.

Пример второго варианта:

angular
  .module('testApp', [])
  .controller('UsecaseForm', function UsecaseFormController() {
    var ctrl = this;
    ctrl.usecases = new Set();
    ctrl.usecasesArr = 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.usecasesArr = Array.from(ctrl.usecases);
      ctrl.usecase.object = '';
      ctrl.usecase.subject = '';
      ctrl.usecase.action = '';
      ctrl.usecase.parameters = [];

    }

    ctrl.addParam = function() {
      ctrl.usecase.parameters.push(
        ctrl.usecase.parameter
      );
    }
  })
  .filter('set2Array', function() {
    return function(s) {
      return Array.from(s);
    }
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="testApp" ng-controller="UsecaseForm as ctrl" 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></label>
    <input type="submit" value="Save" />
  </form>

  Переводим прямо в шаблоне(самый плохой вариант, не рекомендую)
  <ul>
    <li ng-repeat="usecase in [].constructor.from(ctrl.usecases)">
      {{usecase}}
    </li>
  </ul>


  Используем массив для вывода
  <ul>
    <li ng-repeat="usecase in ctrl.usecasesArr">
      {{usecase}}
    </li>
  </ul>


  Используем filter для вывода
  <ul>
    <li ng-repeat="usecase in ctrl.usecases|set2Array">
      {{usecase}}
    </li>
  </ul>

</div>

3
  • Попробовала я второй метод. ctrl.addUsecase = function() { ctrl.usecases.add({ object: ctrl.usecase.object, subject: ctrl.usecase.subject, action: ctrl.usecase.action, parameters: ctrl.usecase.parameters }) ctrl.usecasesArr = Array.from(ctrl.usecases); ctrl.usecase.object = ''; ctrl.usecase.subject = ''; ctrl.usecase.action = ''; ctrl.usecase.parameters = ''; console.log(ctrl.usecasesArr); }, но массив выводиться все-равно отказался :( Выводила следующей строкой в template: ng-repeat="usecase in ctrl.usecasesArr"
    – Yumie
    23 апр 2018 в 18:00
  • 1
    @Yumie Вы забыли знак доллара $ везде... У меня без знака, так как у меня не компонент, а контроллер. 24 апр 2018 в 14:32
  • Спасибо большое за подсказку. И правда дело было в знаке долларе. Все получилось.
    – Yumie
    25 апр 2018 в 8:55

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.