使用angular js的单向数据流结构

Question

我有一个应用程序可以动态设计调查问题。我正在使用AngularJS 1.5+。我有其他问题，例如复选框列表，单选按钮列表，日期选择器等。每个人都有自己的选项和设置配置。

这将是html结构

为此，我有一个名为SurveyDesigner Controller的控制器。对于每种问题类型，我为阅读模式和编辑模式创建了单独的组件。 我会逐页重复问题列表，并首先显示已阅读的组件。我只想知道如何设计代码以完成此示例中数据流的一种工作方式。假设要编辑一个问题并在“设置”选项卡中显示其相对设置，请对其进行更新，并在单击“保存主控制器阵列”时进行更新，并在单击时还原为新设置。

这是我尝试过的fiddle链接代码。需要指导以实现这一目标。

<div ng-app="demoApp" ng-controller="SurveyDesignerCtrl as $ctrl">
  <div id="div1">
    <fieldset>
      <legend>Settings:</legend>
      <div>
        <p>
          <select>
       <option value=""></option>
       <option ng-repeat="ques in $ctrl.survey_questions | pagequestion : $ctrl.options.page track by $index" value="{{ques.id}}">{{ques.text}}</option>
       </select>
        </p>
      </div>
      <div>
        <p>
          Required : <input>
        </p>
        <p>
          Options <button>
      +
      </button>
          <button>
      -
      </button>
        </p>
        <p>
          Date Format : <input placeholder="dd/mmm/yyyy">
        </p>
      </div>
    </fieldset>
  </div>

  <div id="div2">
    <fieldset>
      <legend>Questions:</legend>
      <div ng-repeat="ques in $ctrl.survey_questions | pagequestion : $ctrl.options.page track by $index">
        <div ng-if="ques.type == 'CheckBoxList'">
          <checkboxlist-read question="ques" ng-if="!ques.edit"></checkboxlist-read>
          <checkboxlist-edit question="ques" ng-if="ques.edit"></checkboxlist-edit>
        </div>

        <div ng-if="ques.type == 'RadioButtonList'">
          <radiobuttonlist-read question="ques" ng-if="!ques.edit"></radiobuttonlist-read>
          <radiobuttonlist-edit question="ques" ng-if="ques.edit"></radiobuttonlist-edit>
        </div>

        <div ng-if="ques.type == 'DatePicker'">
          <datepicker-read question="ques" ng-if="!ques.edit"></datepicker-read>
          <datepicker-edit question="ques" ng-if="ques.edit"></datepicker-edit>
        </div>

      </div>
    </fieldset>
  </div>

var designer = function() {
  var ctrl = this;
  ctrl.options = {
    page: 1
  };
  ctrl.settings = {
    selected: ""
  };
  ctrl.survey_questions = [{
    page: 1,
    questions: [{
        id: 1,
        type: 'CheckBoxList',
        text: 'Please select car model ?',
        options: ['A', 'B', 'C'],
        required: false,
        edit: false,
      },
      {
        id: 2,
        type: 'RadioButtonList',
        text: 'Please select car color ?',
        options: ['A', 'B', 'C'],
        required: false,
        edit: false,
      },
      {
        id: 3,
        type: 'DatePicker',
        text: 'Please select date?',
        options: [],
        format: 'dd/mm/yyyy',
        required: false,
        edit: false,
      },
    ]
  }];
}
var checkBoxListRead = {
  bindings: {
    question: '<'
  },
  controller: function() {
    var ctrl = this;
    ctrl.edit = function() {
      ctrl.question.edit = !ctrl.question.edit;
    }
  },
  template: `
    <p>
      <span ng-bind="$ctrl.question.text"></span>
      <button ng-click="$ctrl.edit()">edit</button>
      <button>delete</button>
    </p>
    <ul>
        <li ng-repeat="op in $ctrl.question.options">{{op}}</li>
    </p>
  `
}
var checkBoxListEdit = {
  bindings: {
    question: '<'
  },
  controller: function() {
    var ctrl = this;
    ctrl.edit = function() {
      ctrl.question.edit = !ctrl.question.edit;
    }
  },
  template: `
    <p>
      <span ng-bind="$ctrl.question.text"></span>
      <button ng-click="$ctrl.edit()">cancel</button>
      <button>save</button>
    </p>
    <ul>
        <li ng-repeat="op in $ctrl.question.options">{{op}}</li>
    </p>
  `
}
var radioButtonListRead = {
  bindings: {
    question: '<'
  },
  controller: function() {
    var ctrl = this;
    ctrl.edit = function() {
      ctrl.question.edit = !ctrl.question.edit;
    }
  },
  template: `
    <p>
      <span ng-bind="$ctrl.question.text"></span>
      <button ng-click="$ctrl.edit()">edit</button>
      <button>delete</button>
    </p>
    <ul>
        <li ng-repeat="op in $ctrl.question.options">{{op}}</li>
    </p>
  `
}
var radioButtonListEdit = {
  bindings: {
    question: '<'
  },
  controller: function() {
    var ctrl = this;
    ctrl.edit = function() {
      ctrl.question.edit = !ctrl.question.edit;
    }
  },
  template: `
    <p>
      <span ng-bind="$ctrl.question.text"></span>
      <button ng-click="$ctrl.edit()">cancel</button>
      <button>save</button>
    </p>
    <ul>
        <li ng-repeat="op in $ctrl.question.options">{{op}}</li>
    </p>
  `
}
var datepickerRead = {
  bindings: {
    question: '<'
  },
  controller: function() {
    var ctrl = this;
    ctrl.edit = function() {
      ctrl.question.edit = !ctrl.question.edit;
    }
  },
  template: `
    <p>
      <span ng-bind="$ctrl.question.text"></span>
      <button ng-click="$ctrl.edit()">edit</button>
      <button>delete</button>
    </p>
  `
}
var datepickerEdit = {
  bindings: {
    question: '<'
  },
  controller: function() {
    var ctrl = this;
    ctrl.edit = function() {
      ctrl.question.edit = !ctrl.question.edit;
    }
  },
  template: `
    <p>
      <span ng-bind="$ctrl.question.text"></span>
      <button ng-click="$ctrl.edit()">cancel</button>
      <button>save</button>
    </p>
  `
}

function questionfilter() {
  return function(input, page) {
    debugger;
    return input.find(function(x) {
      return x.page == page
    }).questions;
  };
}
angular.module('demoApp', [])
  .controller('SurveyDesignerCtrl', designer)
  .filter('pagequestion', questionfilter)
  .component('checkboxlistRead', checkBoxListRead)
  .component('checkboxlistEdit', checkBoxListEdit)
  .component('radiobuttonlistRead', radioButtonListRead)
  .component('radiobuttonlistEdit', radioButtonListEdit)
  .component('datepickerRead', datepickerRead)
  .component('datepickerEdit', datepickerEdit);