Конкатентные множественные массивы с угловым

Я пытаюсь составить список, в котором пользователь может выбрать, какую информацию они хотят просмотреть ниже. Пользователь выбирает это из контрольного списка. Таким образом, если пользователь просто проверяет obj1 они будут видетьКонкатентные множественные массивы с угловым

obj1 название 1
obj1 название 2

и т.д. Я попробовал несколько вещей (см закомментирована код ниже), но в это codepen У меня просто жестко закодировано, поэтому проверьте, показывают ли они obj1 и obj2.

Как я могу получить его, чтобы показать, что пользователь проверяет, и несколько элементов в целом, или есть лучший способ приблизиться к этому?

 <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>

источник

2014-11-13 ak85

Я бы реструктурировал способ хранения данных. Нет необходимости иметь два набора данных для одного дерева объектов. Я пошел дальше и изменил некоторые имена переменных в основном из личных предпочтений.

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

Тогда для 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>

Вот обновленная ручка: http://codepen.io/anon/pen/emYZLa

источник

2014-11-13 05:47:55 Rorschach120

Конкатентные множественные массивы с угловым

ответ

Смежные вопросы