AngularJS 从 Json 中选择（类似于 MySQL）

Question

我有一个 json：

{"sectionTitle":"Account Information","sectionItems":[{"itemTitle":"Balance","url":"/account/balance","selected":true},{"itemTitle":"Account Statement","url":"/account/statementsearch","selected":false},{"itemTitle":"Deposit","url":"/account/deposit","selected":false},{"itemTitle":"Withdrawal","url":"/account/withdraw","selected":false},{"itemTitle":"Edit Profile","url":"/account/editprofile","selected":false},{"itemTitle":"Change Password","url":"/account/changepassword","selected":false}]}

现在我只想检查 sectionTitle 中是否有一个项（子项），其中 selected 为 true。

SQL 中的类似内容

SELECT * FROM sectionItems WHERE selected=true

我可以在angular js中做类似的事情，这样我就可以检查父母是否有孩子？

希望你能理解我的问题。

这是我的html

            <nav class="sidebar-nav">
                    <ul class="nav metismenu" id="side-menu-help">

                        <li ng-repeat="menuItem in accountCtrl.menuStructure">
                            <a class="{{ (menuItem.sectionItems.length > 0) ?  'metisHasChildren' : '' }}" href="/en/help-area/poker-help/poker-rules/">
                                <span ng-if="menuItem.sectionItems.length > 0" class="fa arrow fa fa-angle-double-down"></span>
                                {{ ::menuItem.sectionTitle }}
                                {{ ::menuItem }}
                                </a>
                                <ul class="nav nav-second-level collapse in">
                                    <li ng-repeat="subMenuItem in menuItem.sectionItems" ng-click="accountCtrl.changePage(subMenuItem.url)">
                                        <a ng-class="(subMenuItem.selected) ? 'page-active' : ''">{{ ::subMenuItem.itemTitle }}</a>
                                    </li>
                                </ul>
                        </li>


                    </ul>
                </nav>

Answer 1

你不需要任何花哨的东西来让它工作。只需将 json 转换为对象并使用点表示法访问所需的属性。比如：

var json          = JSON.parse(json);
var selectedItems = [];

angular.forEach(json.sectionItems, function(sectionItem) {
    if (sectionItem.selected) {
        selectedItems.push(sectionItem);
    }
});

将 json 字符串转换为对象，然后遍历每个 sectionItem 子级，检查 selected 是否为真并创建匹配项数组。

Answer 2

您可以使用 forEach 循环。这个例子将返回一个所有 sectionItems 的数组，其中 selected 等于 true，但你可以返回任何你想要的。

$scope.items =[];
angular.forEach(sectionItems, function(item){
  if (item.selected === true){
    $scope.items.push(item);
  }
})

更新

这是一个有效的plunk

要使这项工作与 ng-repeat 内联，您将在过滤器中使用它，如下所示：

app.filter('menuFilter', function() {

  return function(menuItems) {
    var filtered = [];

    angular.forEach(menuItems, function(menuItem) {
      angular.forEach(menuItem.sectionItems, function(item) {
        if (item.selected === true) {
          filtered.push(menuItem);
        }
      });
    });

    return filtered;
  }
});

然后更改您的标记，如下所示：

ng-repeat="menuItem in accountCtrl.menuStructure | menuFilter "