如何在AngularJS中获得具有动态ID的父母的孩子人数

时间:2019-01-13 10:24:51

标签: javascript html angularjs

我有一个下拉列表,并且有几个div,一旦您更改了下拉列表,div就会基于json和selection创建。这里的一切都很好,但是我需要获取每个父级的子代数(这里是p标签)(这里div标签),在这里选择技术后,您会看到python下有2个孩子,因此在python..so旁边应该是2个孩子。这是代码并更新了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" ng-attr-id="{{key}}">
  <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';    
   }
   }
});

1 个答案:

答案 0 :(得分:0)

您可以使用value.length显示元素的数量。

像这样

<h4>Group name: {{ key }} {{value.length}}</h4>

这里是demo