Angular 1.4 ng-if and ng-repeat to menu

Question

I cant seem to get this working.

I get this response from the server :

{levelID: 3, id: 3, grade: 7, Name: "Sec"}
{levelID: 3, id: 3, grade: 8, Name: "Sec"}
{levelID: 3, id: 3, grade: 9, Name: "Sec"}
{levelID: 4, id: 4, grade: 10, Name: "Pre"}

I need to convert it to this ::

   <li>Sec
           <ul>
           <li>7</li>
           <li>8</li>
           <li>9</li>  


          </ul>

   </li>
   <li>Pre
           <ul>
           <li>10</li>

          </ul>

   </li>

Thankss

[this answer](http://stackoverflow.com/a/25342374/2435473) could help you. — Pankaj Parkar, Oct 21 '16 at 05:54

score 0 · Answer 1 · answered Oct 21 '16 at 06:02

Can you use a filter?

'use strict';

angular.module('app', []);

angular
  .module('app')
  .controller('MainController', MainController);

  function MainController() {
    var vm = this;
    
    vm.data = [
                {
                  "levelID": 3,
                  "id": 3,
                  "grade": 7,
                  "Name": "Sec"
                },
                {
                  "levelID": 3,
                  "id": 3,
                  "grade": 8,
                  "Name": "Sec"
                },
                {
                  "levelID": 3,
                  "id": 3,
                  "grade": 9,
                  "Name": "Sec"
                },
                {
                  "levelID": 4,
                  "id": 4,
                  "grade": 10,
                  "Name": "Pre"
                }
              ];
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>

<div ng-app="app" ng-controller="MainController as vm">
  <ul>
    <li>Sec
      <ul ng-repeat="item in vm.data | filter:{Name:'Sec'}">
        <li>{{item.grade}}</li>
      </ul>
    </li>
    <li>Pre
      <ul ng-repeat="item in vm.data | filter:{Name:'Pre'}">
        <li>{{item.grade}}</li>
      </ul>
    </li>
  </ul>
</div>

score 0 · Answer 2 · answered Oct 21 '16 at 06:16

You can achieve this by using groupBy in angular js ng-repeat

Here is the solution

<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
  <script>
  angular.module('app',['angular.filter'])
  .controller('MainController', function($scope) { 
    $scope.Options = [
      {levelID: 3, id: 3, grade: 7, Name: "Sec"},
      {levelID: 3, id: 3, grade: 8, Name: "Sec"},
      {levelID: 3, id: 3, grade: 9, Name: "Sec"},
      {levelID: 4, id: 4, grade: 10, Name: "Pre"},
    ];
 });
  </script>
  
  <title>Angular</title>
</head>
<body>
  <div ng-controller="MainController"> 
    
    <ul ng-repeat="(key, value) in Options | groupBy: 'Name'">
      {{ key }}
      <li ng-repeat="option in value">
        {{ option.grade }} 
      </li>
    </ul>
  </div>
</body>
</html>

score 0 · Accepted Answer · answered Oct 21 '16 at 06:30

You can achieve this using custom filters and ng-if condition

<div ng-app="myApp">
<div ng-controller="appController">
    {{title}}
    <li ng-repeat="data in dataArr | unique:'Name'">{{data.Name}}
        <ul>
          <li ng-repeat="innerData in dataArr" ng-show="data.Name == innerData.Name">
            {{innerData.grade}} 
          </li>
        </ul>
    </li>
</div>

var app = angular.module("myApp",[]);
app.filter('unique', function() {
   return function(collection, keyname) {
      var output = [], 
          keys = [];

      angular.forEach(collection, function(item) {
          var key = item[keyname];
          if(keys.indexOf(key) === -1) {
              keys.push(key);
              output.push(item);
          }
      });

      return output;
   };
});
app.controller("appController",function($scope){
    $scope.title = "Welcome to this demo!";
  $scope.dataArr = [{levelID: 3, id: 3, grade: 7, Name: "Sec"},
    {levelID: 3, id: 3, grade: 8, Name: "Sec"},
    {levelID: 3, id: 3, grade: 9, Name: "Sec"},
    {levelID: 4, id: 4, grade: 10, Name: "Pre"}]
})

here is the working fiddle : http://jsfiddle.net/krishroxx/5DMjt/8813/

Using a custom filter in this case is not proper I think. This can be achieved by the groupBy filter in angular itself. Also the 'unique' filter does the same action of 'groupBy' — Nitheesh, Nov 03 '16 at 11:30

Angular 1.4 ng-if and ng-repeat to menu

3 Answers3