Question

我正在努力迭代数组中的数组。我需要创建一个类似按钮的垂直菜单，不能让它工作。

angular.module('NavigationApp',[]).controller('NavigationController', function($scope) {

    $scope.items = [
        'Home',
        'Orders':
        {
            orders:['Orders', 'Open', 'Closed', 'New', 'Forgotten']
        },
        'Users',
        'Resources',
        'Settings',
        'Help'
    ];
    $scope.activeMenu = $scope.items[0];
    $scope.setActive = function(item) {
      $scope.activeMenu = item;
    };

});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body ng-app="NavigationApp">
   <div class="col-md-3">
       <div ng-controller="NavigationController">
           <input type="text" placeholder="Search" ng-model="filterQuery" />
           <ul class="list-group">
               <li ng-click="setActive(item)" ng-class="{active: activeMenu === item}" class="btn btn-lg list-group-item" ng-repeat="item in items | filter:filterQuery"><a href="#">{{ item }}</a>
               </li>
           </ul>
       </div>
   </div>
    <script src="js/MainController.js"></script>
</body>
</html>

我需要做的是显示项目数组，当Orders项目处于活动状态时，使用其他数组中给出的元素展开它。说实话，我只是不知道如何制作它。

Answer 1

您正在尝试ng-repeat异构数组。即它的元素并非都是同一类型。实现逻辑需要在这里改变。

如果您的数据结构不灵活，您可以做的一件事是使用typeof item === 'object'从字符串中过滤掉对象，或者相反地检查typeof字符串

Answer 2

以下是您可以使用的快速基本示例：

$scope.items = [{
    name: 'Home'
}, {
    name: 'Orders',
    dropdown: [{
        name: 'Orders'
    }]
},{
    name: 'Users'
},
...
];

<li ng-repeat="item in items | filter:filterQuery" class="btn btn-lg list-group-item dropdown" ng-class="{active: activeMenu === item}" ng-click="setActive(item)">
    <a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">
        {{ item.name }} <span class="caret" ng-if="item.dropdown"></span>
    </a>
    <ul ng-if="item.dropdown" class="dropdown-menu">
        <li ng-repeat="dItem in item.dropdown">
            <a href="#">{{dItem.name}}</a>
        </li>
    </ul>
</li>

我建议另外深入研究https://docs.angularjs.org/api/ng/directive/ngRepeat以完全理解指令所需的结构。

Answer 3

angular.module('NavigationApp',[]).controller('NavigationController', function($scope) {

    $scope.items = {
        main:['Home','Orders','Users','Resources','Settings','Help'],
        sub:['Open','Closed','New','Forgotten']
    };
    $scope.activeMenu = $scope.items[0];
    $scope.setActive = function(item) {
      $scope.activeMenu = item;
    };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body ng-app="NavigationApp">
   <div class="col-md-3">
       <div ng-controller="NavigationController">
           <input type="text" placeholder="Search" ng-model="filterQuery" />
           <ul class="list-group">
               <li ng-click="setActive(item)" ng-class="{active: activeMenu === item}" class="btn btn-lg list-group-item" ng-repeat="item in items.main | filter:filterQuery"><a href="#">{{ item }}</a>
                    <ul>
                        <li class="btn btn-lg list-group-item" ng-repeat="it in items.sub" ng-if="activeMenu === 'Orders'">{{it}}</li>
                    </ul>
               </li>
           </ul>
       </div>
   </div>
    <script src="js/MainController.js"></script>
</body>
</html>

这更接近我想要实现的目标。但我不知道如何将这个嵌套的UL应用于父列表中的一个Li。

Answer 4

此过滤器正常工作

INPUT：

['Home',{ 'Orders':{orders:['Orders', 'Open', 'Closed', 'New', 'Forgotten']}},'Users','Resources','Settings','Help']

输出：

 ["Home", "Orders", "Open", "Closed", "New", "Forgotten", "Users", "Resources", "Settings", "Help"]

＆＃13;

app.filter('customfilter', function () {
return function (data) {          
    function clean(item)
    {
      var result = [] ;
      // check if type is array
      if(Array.isArray(item)){
        // parse array
        item.forEach(function(i){
          result = result.concat(clean(i));
        })
      }// check if type is opject
      else if(typeof item =="object"){
          // parse opject
          Object.keys(item).map(function (key) {
             result = result.concat(clean(item[key]));
          });
      }else{
        result= [item]
      }
      return result ;
     } 
   return clean(data) ; 
 }

})

＆＃13;

Answer 5

我相信有很多方法可以回答这个问题，虽然我已经为您的问题制作了一个样本plunker。我们是怎样的

HTML看起来像

<body ng-app="NavigationApp">
    <div class="col-md-3">
        <div ng-controller="NavigationController">
            <input type="text" placeholder="Search" ng-model="filterQuery" />
            <ul class="list-group">
                <li ng-click="setActive(item)" ng-class="{active: activeMenu === item}" class="btn btn-lg list-group-item" ng-repeat="item in items | filter:filterQuery">
                    <a href="#">
                        <p ng-hide="item.dropdown"> {{ item.name }}</p>
                        <p ng-show="item.dropdown" ng-repeat="values in item.dropdown"> {{ values }}</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>

</body>

JS看起来像

angular.module('NavigationApp', []).controller('NavigationController', function($scope) {

    var orderItemsObj = {
        orders: ['Orders', 'Open', 'Closed', 'New', 'Forgotten']
    };
    $scope.items = [{
        name: 'Home'
    }, {
        name: 'Orders',
        dropdown: ['Orders', 'Open', 'Closed', 'New', 'Forgotten']
    }, {
        name: 'Users'
    }, ];

    $scope.activeMenu = $scope.items[0];
    $scope.setActive = function(item) {
        $scope.activeMenu = item;
    };

});

数组中的数组，angularJS，ng-repeat

5 个答案: