0

I have selected a dropdown list, changing the dropdown list will be displayed, but here I want to add single/common title has value before each value.If values are repeating same, the title will be common.Here every thing is working fine but title is repeating always.Is there a way to restrict only once.I have added an expected result output in my code for reference.Here is the code below and plunker for demo https://plnkr.co/edit/XEzYi1JEeOtvqC6xn9jZ?p=preview

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div>--Please change the dropdown--</div>
<select class="change" ng-model="x" ng-change="update()">
<option value="condition">condition</option>
</select>
<div class="main">
<div class="status" ng-repeat="emp in groups" ng-attr-id="{{emp[attr]}}">
<h4 id="test" class="{{emp[attr]}}">{{emp[attr]}}</h4>
<p id="test" class="{{emp[attr]}}">{{emp[attr]}}</p>
</div>
<div>--Hardcoded expected result--</div>
<div class="main">
<div id="critical">
<h4 id="test" class="critical">critical</h4>
</div>
<div id="critical">
</div>
<div id="critical">
</div>
<div id="major">
<h4 id="test" class="major">major</h4>
</div>
<div id="major">
</div>
</div>
</div>
</div>

script.js

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.groups = [
    {
      name: 'Malaria',
      symptom:'fever',
      categoty:'critical',
      id:'1'
    },

    {
      name: 'cancer',
      symptom:'diesease',
      categoty:'critical',
      id:'3'
    },
    {
      name: 'fever',
      symptom:'diesease',
      categoty:'critical',
      id:'3'
    },
    {
     name: 'Cold',
      symptom:'colds',
      categoty:'major',
      id:'2'
    },
    {
     name: 'Cold',
      symptom:'colds',
      categoty:'major',
      id:'2'
    }
    ]
  $scope.update = function() {     
   if($scope.x == 'condition'){
   $scope.id='categoty';
    $scope.attr = 'categoty';   
   }

}
});
Bindiya H
  • 153
  • 5
  • 9
carreankush
  • 621
  • 2
  • 9
  • 32
  • Possible duplicate of [Angular ng-repeat conditional wrap items in element (group items in ng-repeat)](https://stackoverflow.com/questions/23493063/angular-ng-repeat-conditional-wrap-items-in-element-group-items-in-ng-repeat) – karthickj25 Jan 13 '19 at 06:19
  • In my case value is coming based on dropdown,how to handle this here – carreankush Jan 13 '19 at 06:53

1 Answers1

0

I have resolved by myself here is the code below and updated my plunker

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
<script src="script.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select class="change" ng-model="x" ng-change="update()">
<option value="technology">technology</option>
<option value="vertical">vertical</option>
</select>

<div ng-repeat="(key, value) in players | groupBy: attr">
  <h4>Group name: {{ key }}</h4>
  <p ng-repeat="player in value">
    player: {{ player.name }} 
  </p>
</div>

</div>

script.js

var app = angular.module("myApp", ['angular.filter']);
app.controller("myCtrl", function($scope) {
$scope.players = [
    {
      name: 'projectjava',
      symptom:'fever',
      technology:'java',
       vertical:'insurance',      
      id:'1'
    },

    {
      name: 'projecttabulue',
      symptom:'diesease',
      technology:'tabulue',
       vertical:'Banking',    
      id:'3'
    },
    {
      name: 'projectpython1',
      symptom:'diesease',
      technology:'python',
       vertical:'Health care',    
      id:'3'
    },
    {
     name: 'projectpython2',
      symptom:'colds',
      technology:'python',
       vertical:'Banking',    
      id:'2'
    }

    ];

     $scope.update = function() {      
  if($scope.x == 'technology'){
   $scope.id='technology';
    $scope.attr = 'technology'; 
   }
   if($scope.x == 'vertical'){
   $scope.id='vertical';
   $scope.attr = 'vertical';    
   }
   }
});
carreankush
  • 621
  • 2
  • 9
  • 32