Angularjs - Как ограничить повторение ng на основе значения - PullRequest
Новая
       1

Angularjs - Как ограничить повторение ng на основе значения

0 голосов
/ 12 января 2019

Я использую angularjs, здесь мой div будет основан на изменении выпадающего списка. Здесь мне нужно ограничить тег h4 только один раз в зависимости от его значения. Если предположить, что мое значение критическое, приходящее несколько раз, должно быть только еще раз если мое значение major многократное, оно должно быть только один раз. Эти значения поступают из json, поэтому оно динамическое. Может кто-нибудь помочь, если вы новичок в angularjs, вот код ниже

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>
<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 id="test" class="{{emp[attr]}}">{{emp[attr]}}</h4>
</div>
</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:'major',
      id:'3'
    },
    {
     name: 'Cold',
      symptom:'colds',
      categoty:'major',
      id:'2'
    }
    ]
  $scope.update = function() {     
   if($scope.x == 'condition'){
   $scope.id='categoty';
    $scope.attr = 'categoty';   
   }   
}
});

1 Ответ

0 голосов
/ 13 января 2019

Вы были немного двусмысленны, когда говорите, что «приходите только один раз в данных». Я думаю, что поведение, которое вы ищете в общем plnkr, состоит в том, чтобы позволить пользователю выбирать атрибут и группу по этому атрибуту, показывая только свойство имени, указанное в отдельных группах.

Для этого я создал набор атрибутов, которые пользователь может выбрать. Поэтому, если в будущем к объектам будет добавлено второстепенное свойство, оно продолжит функционировать, и его можно будет добавить в средство выбора.

После выбора элемента данные анализируются и группируются элементы по выбранному атрибуту. Каждая группа представляет собой ключ (выбранный атрибут), который сопоставляется с массивом (именами элементов). После того как группирование выполнено, два ng-повтора могут отображать свои данные. Верхний уровень ng-repeat для каждой категории группы и вложенный ng-repeat для отображения элементов / имен в группе. 

var jsonData = [
    {
      name: 'Malaria',
      symptom:'Fever',
      category:'Critical',
      id:'1'
    },

    {
      name: 'Cancer',
      symptom:'Diesease',
      category:'Critical',
      id:'3'
    },
    {
      name: 'Fever',
      symptom:'Diesease',
      category:'Major',
      id:'3'
    },
    {
     name: 'Cold',
      symptom:'Colds',
      category:'Major',
      id:'2'
    }
];

// Setup angular
angular.module('myApp', [])
  .controller('MainController', function MainController() {
    var self = this;
    
    // Setup your dropdown selections to choose an attribute
    self.attrs = [
      'category',
      'symptom'
    ];
    
    // On selection change, update how groups is built
    self.onSelect = function onSelect(attr) {
      // First build a map of all items grouped by attr
      var groupMap = {};
      jsonData.forEach(function group(item) {
        var attrVal = item[attr],
          arr = groupMap[attrVal];
        if (!arr) {
          arr = groupMap[attrVal] = [];
        }
        // Push the item name
        arr.push(item.name);
      });
      self.groups = groupMap;
    };
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.10/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainController as $ctrl">
  Select Attribute:
  <select ng-model="$ctrl.selectedAttr" ng-change="$ctrl.onSelect($ctrl.selectedAttr)">
    <option ng-repeat="attr in $ctrl.attrs">{{::attr}}</option>
  </select>
  
  <div ng-show="::$ctrl.selectedAttr">
    <div ng-repeat="(attr, names) in $ctrl.groups">
      <h4>{{::attr}}</h4>
      <ul>
        <li ng-repeat="name in names">{{::name}}</li>
      </ul>
    </div>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...