如何在angularjs中隱藏除第一類之外的同一類的所有div

Question

我需要隱藏除第一個以外的所有具有相同類的 div。這里我有一個選擇，一個 div 的數據將在選擇更改時出現。當我們進行更改時，關鍵和主要將出現。這里我需要隱藏所有標題關鍵'除了第一個，同樣我需要隱藏'主要'的所有標題（h4），除了第一個，如果它超過一個。這里這些值/id 或類可能會根據 json 更改。 我需要在 angularjs 中做。任何人都可以幫助我。這是代碼。 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>

腳本

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';
   }

}
});

Answer 1

您可以使用 Level3 選擇器獲取除第一個之外的所有類實例

div.class:not(:first-child)

https://www.w3.org/TR/selectors-3/

將此與簡單的 js 函數或指令結合，如此處的答案中所述https://stackoverflow.com/a/27639866/1020735

Answer 2

據我了解，您需要數組中的唯一對象 - 基於字段categoty （順便說一句，應該是“類別”）。 產生的字段應該始終是第一個。

所以，這應該有效：

  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;
  });

Answer 3

為所有要影響的 div 元素添加一個二級類，例如用於樣式的標准化，並使用該類來影響可見性。

<div class="status" ng-repeat="emp in groups" ng-attr-id="{{emp[attr]}}">
</div>

div.status:not(:first-child) {
  display: none;
}

如何在angularjs中隱藏除第一類之外的同一類的所有div

問題描述

HTML

腳本

3 個解決方案

解決方案1
0 2019-01-12 17:04:51

解決方案2
0 2019-01-12 17:22:24

解決方案3
0 2019-01-12 23:52:27

如何在angularjs中隱藏除第一類之外的同一類的所有div

問題描述

HTML

腳本

3 個解決方案

解決方案1 0 2019-01-12 17:04:51

解決方案2 0 2019-01-12 17:22:24

解決方案3 0 2019-01-12 23:52:27

解決方案1
0 2019-01-12 17:04:51

解決方案2
0 2019-01-12 17:22:24

解決方案3
0 2019-01-12 23:52:27