Я выбрал выпадающий список, будет отображаться изменение выпадающего списка, но здесь я хочу добавить один / общий заголовок, имеющий значение перед каждым значением. Если значения повторяются, заголовок будет общим. Здесь все работает нормально, но заголовок повторяется всегда. Есть способ ограничить только один раз. Я добавил ожидаемый результат вывода в мой код для справки. Вот код ниже и plunker для демонстрации
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';
}
}
});