CODEWITHSUNDEEP
javascriptarrayshtmlangularjsobject
ak85
ak85

Reputation: 4264

Concat multiple arrays with Angular

I am trying to make a list where the user can select what information they want to view below. The user selects this from a check list. So if the user just checks obj1 they will see

etc. I have tried a few things (see commented out code below) but in this codepen I just have it hard coded so on check it shows obj1 and obj2.

How can I get it to show what the user checks and multiple items in concact, or is there a better way to approach this?

        <html ng-app="ionicApp">
          <head>
            <meta charset="utf-8">
            <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
            <title>Checkboxes</title>
            <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
            <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
          </head>
          <body ng-controller="MainCtrl">
            <ion-header-bar class="bar-positive">
              <h1 class="title">Checkboxes</h1>
            </ion-header-bar>
            <ion-content>
              <div class="list">
                <ion-checkbox ng-repeat="item in objList"
                              ng-model="item.checked" 
                              ng-checked="item.checked"
                              ng-change="itemChange($index)">
                  {{ item.name }}
                </ion-checkbox>
                <div class="item" ng-repeat="item in finalObj">{{ item.title }}</div>  
              </div>
            </ion-content>
          </body>
        </html>

        <script>
        angular.module('ionicApp', ['ionic'])
        .controller('MainCtrl', function($scope) {
          $scope.objList = [
            { id:"1", name: "obj1", checked: false },
            { id:"2", name: "obj2", checked: false },
            { id:"3", name: "obj3", checked: false },
            { id:"4", name: "obj4", checked: false }
          ];
          var obj1 = [{id: 1111, title: 'obj1 title 1'},{id: 1112, title: 'obj1 title 2'}];
          var obj2 = [{id: 2221, title: 'obj2 title 1'},{id: 2222, title: 'obj2 title 2'}];  
          var obj3 = [{id: 3331, title: 'obj3 title 1'},{id: 3332, title: 'obj3 title 2'}];  
          var obj4 = [{id: 4441, title: 'obj4 title 1'},{id: 4442, title: 'obj4 title 2'}];
          var finalObj1 = obj1;
          var finalObj2 = obj2;
          //var finalObj2 = obj2,obj3;  Tried this instead for my finalObj2 however it only showed obj2 data
          $scope.itemChange = function(indx) {
            if($scope.objList[indx].checked) {
              /* Tried to get the var called obj plus the index (+1) and push it in this returns undefined.
              $scope.finalObj = [];
              $scope.finalObj.push(this["obj" + (indx + 1)]);
              console.log($scope.finalObj);
              */

              /*  Tired to get the name of the selected item, this seems to return the correct information for finalObj1 and finalObj2 but when I console.log($scope.finalObj) I can see it is just joining 2 strings?
              $scope.finalObj1=$scope.objList[indx].name;
              $scope.finalObj2=$scope.objList[indx+1].name;

              $scope.finalObj = $scope.finalObj1.concat([$scope.finalObj2]);
              console.log($scope.finalObj);
              */      

              $scope.finalObj1=finalObj1;
              $scope.finalObj2=finalObj2;

              $scope.finalObj = $scope.finalObj1.concat($scope.finalObj2);
            } 
            else {
              $scope.finalObj1=[];
              $scope.finalObj2=[];
              $scope.finalObj = $scope.finalObj1.concat($scope.finalObj2);
            }
          };  
        });
        </script>

Upvotes: 0

Views: 590

Answers (1)

Rorschach120
Rorschach120

Reputation: 1210

I would restructure the way you are storing the data. There is no need to have two sets of data for one tree of objects. I've gone ahead and changed some of the variable names mostly out of personal preference.

angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope) {

  $scope.displayObj = [];

  $scope.objList = [
  {
    id: '1',
    name: 'obj1',
    active: false,
    contents: [
      {id: 1111, title: 'obj1 title 1'},
      {id: 1112, title: 'obj1 title 2'}
    ]
  },
  {
    id: '2',
    name: 'obj2',
    active: false,
    contents: [
      {id: 2221, title: 'obj2 title 1'},
      {id: 2222, title: 'obj2 title 2'}
    ]
  },
  {
    id: '3',
    name: 'obj3',
    active: false,
    contents: [
      {id: 3331, title: 'obj3 title 1'},
      {id: 3332, title: 'obj3 title 2'}
    ]
  },
  {
    id: '4',
    name: 'obj4',
    active: false,
    contents: [
      {id: 4441, title: 'obj4 title 1'},
      {id: 4442, title: 'obj4 title 2'}
    ]
  }
];
  /* I left this in here in case you were uncomfortable adding more DOM elements
   $scope.itemChange = function() {
    $scope.displayObj = [];
    for(var x = 0; x < $scope.objList.length; x++) {
      if($scope.objList[x].active === true) {
        for(var y = 0; y < $scope.objList[x].contents.length; y++) {      
          $scope.displayObj.push($scope.objList[x].contents[y]);
        }
      }
    }
  } */  
});

Then for the DOM

<ion-header-bar class="bar-positive">
  <h1 class="title">Checkboxes</h1>
</ion-header-bar>
<ion-content>
  <div class="list">
    <ion-checkbox ng-repeat="item in objList"
                  ng-model="item.active" 
                  ng-checked="item.active">
      {{ item.name }}
    </ion-checkbox>
    <div ng-repeat="item in objList">
      <div class="item" ng-show="item.active" ng-repeat="c in item.contents">{{ c.title }}</div>
    </div>

  </div>
</ion-content>

Here's the updated pen : http://codepen.io/anon/pen/emYZLa

Upvotes: 2

Related Questions