Question

好的，所以我在Angularjs / Javascript的情况下。我有一个来自json的项目列表，它们都有子类别。所以我需要发生的是当我的列表显示时，如果用户在该列表中选择了该项，那么子类别中相关的所有内容都将显示。

示例

Group [
    { Item 1:
        { sub 30,
    },
    Item 2:
        { sub 53,
    },
    Item 7:
        { sub 21,
    },
    Item 2:
        { sub 97,
    },
}]

如你所见，有两个“第2项”。如果用户选择项目2，则子53和97将显示。我不知道如何执行条件语句或者如果有任何方法可以执行'Angular way'

Answer 1

这不是特定角度的，但我会在收到数据时处理您的数据，并且更容易获得Item属性引用的子值列表。

 var newGroup = {
    'Item 1': [30],
    'Item 2': [53, 97],
    'Item 3': [21]
};

然后您可以在ng-repeat

中使用键值语法

<div ng-repeat="(key, value) in myObj"> ... </div>

Answer 2

假设用户已经选择了其中一个项目，并且列表中有许多子项目。最简单的方法是在“用户选择”

上将变量指定为所选项目及其子项目

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

Answer 3

试试这个：

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>

Javascript复杂if语句

3 个答案: