个人中心
gpt4 book ai didi

javascript - 使用 Angular 连接多个数组

转载 作者：行者123 更新时间：2023-12-02 16:48:30 26 4
gpt4 key购买 nike

我正在尝试制作一个列表，用户可以在其中选择他们想要在下面查看的信息。用户从检查列表中选择此项。因此，如果用户只检查 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>

最佳答案

我会重组您存储数据的方式。一棵对象树不需要有两组数据。我已经继续更改了一些变量名称，主要是出于个人喜好。

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

关于javascript - 使用 Angular 连接多个数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26901873/

26 4 0
文章推荐： javascript - 怎么自动计算
文章推荐： javascript - 使用 jquery 简单验证按钮单击操作
文章推荐： javascript - 使用 ng Repeat 显示 JSON
文章推荐： clojure - 排序映射对现有键返回 nil 值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com