Javascript 复杂的 if 语句
Javascript complicated if statement
好的,所以我处于 Angularjs/Javascript 的情况。我有一个来自 json 的项目列表,它们都有子类别。所以我需要做的是,当我的列表显示时,如果用户在该列表中选择了这个项目,那么相关子类别中的所有内容都会显示。
例子
Group [
{ Item 1:
{ sub 30,
},
Item 2:
{ sub 53,
},
Item 7:
{ sub 21,
},
Item 2:
{ sub 97,
},
}]
如您所见,有两个 "Item 2"。如果用户选择项目 2,则将显示子 53 和 97。我不知道如何执行条件语句,或者是否有任何方法可以执行 'Angular way'
这不是 angular 具体的,但我会在收到您的数据后对其进行处理,以便更容易获得项目属性引用的子值列表。
var newGroup = {
'Item 1': [30],
'Item 2': [53, 97],
'Item 3': [21]
};
然后你可以在 ng-repeat
中使用键值语法
<div ng-repeat="(key, value) in myObj"> ... </div>
假设用户已经选择了其中一项,并且列表中有很多子项。
最简单的方法是在 'user selection'
上分配一个变量作为所选项目及其子项目
...// on user selection
$scope.selectedItem = 'itemName from user input';
$scope.selected = $array_of_subitems; // this is item2 for example , and contains all the subs belonging to that
注意:如果你能提供更多关于如何调用选择的细节,我可以改进上面的代码
在您的 html 中,由于您需要显示所选元素,因此您可以轻松地显示所有子项
<h1>Item Named : {{selectedItem}} has following subitems</h1>
<div ng-repeat="subitem in selected">
{{subitem}}
<div>
试试这个:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
var items = [
{
"Item 1": "sub 30"
},
{
"Item 2": "sub 53"
},
{
"Item 7": "sub 21",
},
{
"Item 2": "sub 97"
}
];
var grouped = {};
for (var i=0; i<items.length; i++) {
for (var item in items[i]) {
if (!grouped[item]) {
grouped[item] = {};
grouped[item].subs = [];
}
grouped[item].subs.push(items[i][item]);
}
}
$scope.group = grouped;
$scope.toggleSubs = function(item) {
$scope.group[item].showSubs = !$scope.group[item].showSubs;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="MyCtrl">
<div ng-repeat="(item, data) in group">
<a href ng-click="toggleSubs(item)">{{item}}</a>
<div ng-show="data.showSubs">
<div ng-repeat="sub in data.subs">
<ul>
<li>{{sub}}</li>
</ul>
</div>
</div>
</div>
</div>
好的,所以我处于 Angularjs/Javascript 的情况。我有一个来自 json 的项目列表,它们都有子类别。所以我需要做的是,当我的列表显示时,如果用户在该列表中选择了这个项目,那么相关子类别中的所有内容都会显示。
例子
Group [
{ Item 1:
{ sub 30,
},
Item 2:
{ sub 53,
},
Item 7:
{ sub 21,
},
Item 2:
{ sub 97,
},
}]
如您所见,有两个 "Item 2"。如果用户选择项目 2,则将显示子 53 和 97。我不知道如何执行条件语句,或者是否有任何方法可以执行 'Angular way'
这不是 angular 具体的,但我会在收到您的数据后对其进行处理,以便更容易获得项目属性引用的子值列表。
var newGroup = {
'Item 1': [30],
'Item 2': [53, 97],
'Item 3': [21]
};
然后你可以在 ng-repeat
中使用键值语法<div ng-repeat="(key, value) in myObj"> ... </div>
假设用户已经选择了其中一项,并且列表中有很多子项。 最简单的方法是在 'user selection'
上分配一个变量作为所选项目及其子项目 ...// on user selection
$scope.selectedItem = 'itemName from user input';
$scope.selected = $array_of_subitems; // this is item2 for example , and contains all the subs belonging to that
注意:如果你能提供更多关于如何调用选择的细节,我可以改进上面的代码
在您的 html 中,由于您需要显示所选元素,因此您可以轻松地显示所有子项
<h1>Item Named : {{selectedItem}} has following subitems</h1>
<div ng-repeat="subitem in selected">
{{subitem}}
<div>
试试这个:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
var items = [
{
"Item 1": "sub 30"
},
{
"Item 2": "sub 53"
},
{
"Item 7": "sub 21",
},
{
"Item 2": "sub 97"
}
];
var grouped = {};
for (var i=0; i<items.length; i++) {
for (var item in items[i]) {
if (!grouped[item]) {
grouped[item] = {};
grouped[item].subs = [];
}
grouped[item].subs.push(items[i][item]);
}
}
$scope.group = grouped;
$scope.toggleSubs = function(item) {
$scope.group[item].showSubs = !$scope.group[item].showSubs;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="MyCtrl">
<div ng-repeat="(item, data) in group">
<a href ng-click="toggleSubs(item)">{{item}}</a>
<div ng-show="data.showSubs">
<div ng-repeat="sub in data.subs">
<ul>
<li>{{sub}}</li>
</ul>
</div>
</div>
</div>
</div>