Javascript Concat多个阵列具有角度
我正在尝试制作一个列表，用户可以在其中选择他们想要查看的信息。 用户从检查列表中选择此选项。 因此，如果用户只是检查obj1，他们将看到 obj1标题1 obj1标题2 等等。 我尝试了一些方法，请参见下面注释掉的代码，但在这里，我只是对其进行了硬编码，所以请检查它是否显示obj1和obj2 我怎样才能让它显示用户检查的内容和conact中的多个项目，或者有更好的方法来实现这一点Javascript Concat多个阵列具有角度,javascript,arrays,html,angularjs,object,Javascript,Arrays,Html,Angularjs,Object,我正在尝试制作一个列表，用户可以在其中选择他们想要查看的信息。 用户从检查列表中选择此选项。 因此，如果用户只是检查obj1，他们将看到 obj1标题1 obj1标题2 等等。 我尝试了一些方法，请参见下面注释掉的代码，但在这里，我只是对其进行了硬编码，所以请检查它是否显示obj1和obj2 我怎样才能让它显示用户检查的内容和conact中的多个项目，或者有更好的方法来实现这一点 <html ng-app="ionicApp"> <head&
<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]);
}
}
}
} */
});
<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>