Click to Edit with AngularJS

Example 1

by krishna agrawal

HTML

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

JavaScript

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"}]
    })