CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeatimmutability
tr3online
tr3online

Reputation: 1429

Angular dynamic selects have items that affect one another

I'm attempting to make a dynamic form in Angular 1.4.7 in which:

These requirements are all working (roughly) with the exception of:

I assume that this is happening due to the fact that I'm pushing the actual dimension objects in to each reports dimensions: [] array and that they are still pointing to the same object.

-- EDITS --

I realize angular.clone() is a good way to break this reference, but the <select> code I wrote is automatically piping in the object to the model. I was tempted to give each report their own controller and giving each report their own copy() of the options.

Would this work? Or is there a better way?

I have a working JSBin here.

Pertinent Code:

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;
  };
}]);

Upvotes: 1

Views: 94

Answers (2)

tr3online
tr3online

Reputation: 1429

I ended up using select as so that it just set an id on the object instead of pointing to the original object. This solved the problem.

Upvotes: 0

charlietfl
charlietfl

Reputation: 171679

How do I get around pushing same object reference to array

Use angular.copy()

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

Upvotes: 1

Related Questions