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内是否存在选项为真的项目（子项）。

SQL中的这样的事情

SELECT * FROM sectionItems WHERE selected=true

我可以在角度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是否为true并创建匹配项的数组。

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 "

Answer 3

首先，您不需要执行任何自定义过滤器或类似操作，只需使用标准 过滤器，如下所示：

<li ng-repeat="menuItem in accountCtrl.menuStructure | filter: { sectionItems: { selected: true } }"> {{ menuItem.sectionTitle }}

工作演示：

＆＃13;

angular.module('app', [])
  .controller('accountController', function() {
    var vm = this;
  
    vm.menuStructure = [  
       {  
          "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":"Account Information 2",
          "sectionItems":[  
             {  
                "itemTitle":"Balance",
                "url":"/account/balance",
                "selected":false
             },
             {  
                "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
             }
          ]
       }
    ];
  });

＆＃13;

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="accountController as accountCtrl">
  <ul>
    <li ng-repeat="menuItem in accountCtrl.menuStructure | filter: { sectionItems: { selected: true } }"> {{ menuItem.sectionTitle }}
      <ul class="nav nav-second-level collapse in">
        <li ng-repeat="subMenuItem in menuItem.sectionItems" ng-click="accountCtrl.changePage(subMenuItem.url)">
          <a ng-class="{ 'page-active': subMenuItem.selected }" ng-bind="::subMenuItem.itemTitle"></a>
        </li>
      </ul>
    </li>
  </ul>
</body>

</html>

＆＃13;

<强>提示：

您可以简单地使用这种方式，而不是将ngClass与ternary运算符一起使用：

ng-class="{ 'page-active': subMenuItem.selected }"

即使以您正在使用的方式工作，我也建议您查看special-repeats，这非常适合您的情况。

我希望它有所帮助!!

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

4 个答案: