How to hide all the divs of same class except first class in angularjs
Question
I need to hide all div having same class except first one.Here I have a select,and a div whose data will come on change of select.when we onchage,critical and major will come.Here I need to hide all heading of 'critical' except first one,similarly I need to hide all heading(h4) of 'major' except first one,if its more than one.Here these value/id or class may change based on json. I need to do in angularjs.can anyone please help me.Here is the code. https://plnkr.co/edit/77PXskAuwtG0uAVsK1fz?p=preview
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select class="change" ng-model="x" ng-change="update()">
<option value="condition">condition</option>
</select>
<div class="main">
<div ng-repeat="emp in groups" ng-attr-id="{{emp[attr]}}">
<h4 class="{{emp[attr]}}">{{emp[attr]}}</h4>
<p class="values">{{emp[attr]}}</p>
</div>
</div>
SCRIPT
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'
}
]
$scope.update = function() {
if($scope.x == 'condition'){
$scope.id='categoty';
$scope.attr = 'categoty';
}
}
});
3 answers
solution1
0 2019-01-12 17:04:51
You can get all instances of the class except the first using the Level3 selectors
div.class:not(:first-child)
https://www.w3.org/TR/selectors-3/
Marry this with a plain js function or a directive as explained in the answer here https://stackoverflow.com/a/27639866/1020735
solution2
0 2019-01-12 17:22:24
As far as I understand you want unique objects in the array - based on the field categoty (should be "category" btw.). The field yielded should always be the first.
So, this should work:
var 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'
}]
var existing = {};
$scope.groups = groups.filter(function(entry) {
if (existing[entry.categoty]) {
return false;
}
existing[entry.categoty] = true;
return true;
});
solution3
0 2019-01-12 23:52:27
Add a secondary class to all div elements to be affected, such as for standardization of style, and use that class to affect visibility.
<div class="status" ng-repeat="emp in groups" ng-attr-id="{{emp[attr]}}">
</div>
div.status:not(:first-child) {
display: none;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.