Question

我试图在Angular 1.4.7中创建一个动态表单，其中：

有多个报告（vm.reports = [];）
可以通过vm.reportOptions为每个报告分配 ONE 报告对象。
每个vm.reportOptions只能在多个报告中选择 ONCE ，并通过exclude进行过滤。
每个报告都通过dimension支持 MANY vm.dimensionOptions 对象。
每个维度只能在每个报告中选择 ONCE ，并通过excludeDimensions进行过滤（后续报告可以访问所有dimensionOptions并自行过滤）。< / LI>

这些要求全部有效（大致），但以下情况除外：

如果我添加两个报告，并添加完全相同的维度（即：报告一个＆gt; 一维＆gt; 为每个报告启用维度过滤器和报告两个＆gt; 维度一＆gt; 启用维度过滤器），更改选择在启用维度过滤器内部会在两个报告中对其进行更改。

我认为这是因为我将实际的维度对象推送到每个报告dimensions: []数组并且它们仍然指向同一个对象。

- 编辑 -

我意识到angular.clone()是打破此引用的好方法，但我编写的<select>代码会自动将对象传递给模型。我很想给每个报告提供自己的控制器，并为每个报告提供自己的copy()个选项。

这会有用吗？或者是否有更好的方式？

我有一份工作JSBin here。

相关代码：

HTML：

<body ng-app="app">

  <div ng-controller="AlertsController as alerts">

    <pre>{{alerts.output(alerts.reports)}}</pre>

    <div class="container">

    <div
      ng-repeat="report in alerts.reports"
      class="report"
    >
      <button
        ng-if="$index !== 0"
        ng-click="alerts.removeItem(alerts.reports,report)"
      >Delete Report</button>

      <label>Select Report</label>
      <select
        ng-model="alerts.reports[$index].report"
        ng-init="report"
        ng-options="reportSelect.niceName for reportSelect in alerts.reportOptions | exclude:'report':alerts.reports:report"
      ></select>

      <div
        ng-repeat="dimension in report.dimensions"
        class="condition"
      >
        <div class="select">
          <h1 ng-if="$index === 0">IF</h1>
          <h1 ng-if="$index !== 0">AND</h1>
          <select
            ng-model="report.dimensions[$index]"
            ng-change="alerts.checkThing(report.dimensions,dimension)"
            ng-init="dimension"
            ng-options="dimensionOption.niceName for dimensionOption in alerts.dimensionOptions | excludeDimensions:report.dimensions:dimension"
          >
            <option value="123">Select Option</option>
          </select>
          <button
            class="delete"
            ng-if="$index !== 0"
            ng-click="alerts.removeItem(report.dimensions,dimension)"
          >Delete</button>
        </div>


        <input type="checkbox" ng-model="dimension.filtered" id="filter-{{$index}}">
        <label class="filter-label" for="filter-{{$index}}">Enable Dimension Filter</label>

        <div ng-if="dimension.filtered">
          <select
            ng-model="dimension.operator"
            ng-options="operator for operator in alerts.operatorOptions">
          </select>
          <input
            ng-model="dimension.filterValue"
            placeholder="Text" 
          ></input>
        </div>

      </div>

      <button
        ng-click="alerts.addDimension(report)"
        ng-if="report.dimensions.length < alerts.dimensionOptions.length"
      >Add dimension</button>
    </div>

    <button
      ng-if="alerts.reports.length < alerts.reportOptions.length"
      ng-click="alerts.addReport()"
    >Add report</button>

    <!--
      <div ng-repeat="sel in alerts.select">
      <select ng-model="alerts.select[$index]" ng-init="sel" 
        ng-options="thing.name for thing in alerts.things | exclude:alerts.select:sel"></select>
    </div>
    -->

    </div><!-- container -->

  </div>

</body>

JS：

var app = angular.module('app', []);

app.controller('AlertsController', function(){
  var vm = this;

  vm.reportOptions = [
    {id: 1, niceName: 'Report One'},
    {id: 2, niceName: 'Report Two'},
    {id: 3, niceName: 'Report Three'},
  ];
  vm.dimensionOptions = [
    {id: 1, niceName: 'Dimension One'},
    {id: 2, niceName: 'Dimension Two'},
    {id: 3, niceName: 'Dimension Three'},
  ];
  vm.operatorOptions = [
    '>',
    '>=',
    '<',
    '<=',
    '=',
    '!='
  ];

  ////// DEBUG STUFF //////
  vm.output = function(value) {
    return JSON.stringify(value, undefined, 4);
  }
  ////////////////////////


  vm.reports = [];
  vm.addReport = function() {
    vm.reports.push({report: {id: null}, dimensions: []});
  }

  vm.removeItem = function(array,item) {
    if(array && item) {
      var index = array.indexOf(item);
      if(index > -1) {
        array.splice(index,1);
      }
    }
  }

  vm.addDimension = function(report) {
    console.log('addDimension',report);
    if(report) {
      report.dimensions.push({})
    }
  };

  // init
  if(vm.reports.length === 0) {
    vm.reports.push({report: {}, dimensions: [{}]});
//     vm.reports.push({report: vm.reportOptions[0], dimensions: [vm.dimensionOptions[0]]}); 
  }

});

app.filter('excludeDimensions', [function() {
  return function(input,select,selection) {
//     console.log('ed',input,select,selection);
    var newInput = [];
    for(var i = 0; i < input.length; i++){
      var addToArray=true;
      for(var j=0;j<select.length;j++){
          if(select[j].id===input[i].id){
              addToArray=false;
          }
      }
      if(addToArray || input[i].id === selection.id){
        newInput.push(input[i]);
      }
    }
    return newInput;
  }
}]);

app.filter('exclude', [function () {
  return function(input,type,select,selection){
    var newInput = [];
    for(var i = 0; i < input.length; i++){
      var addToArray=true;
      for(var j=0;j<select.length;j++){
          if(select[j][type].id===input[i].id){
              addToArray=false;
          }
      }
      if(addToArray || input[i].id === selection[type].id){
        newInput.push(input[i]);
      }
    }
    return newInput;
  };
}]);

Answer 1

如何绕过数组推送相同的对象引用

使用angular.copy()

array.push(angular.copy(vm.formObject));
// clear object to use again in form
vm.formObject={};

Answer 2

我最终使用select as，因此它只是在对象上设置id而不是指向原始对象。这解决了这个问题。

角度动态选择具有相互影响的项目

2 个答案: