Блог

Главная - Вопросы по программированию - создание сгруппированного и подгруппированного выпадающего списка Angularjs

создание сгруппированного и подгруппированного выпадающего списка Angularjs

#javascript #html #angularjs

#javascript #HTML #angularjs

Вопрос:

Я пытаюсь создать выпадающий список в AngularJS, который заполняется Json. Мне нужны группы и подгруппы. Однако я сталкиваюсь с проблемой, когда мне нужно открыть группу внутри моего ng-repeat. Я использую кнопки, чтобы можно было выбирать все элементы, включая заголовки, и отображать divs на основе условий.

HTML и угловой код: 

 (function() {
  'use strict';

  angular.module('cdeApp')
    .component('advCrimeSelect', {
      controller: AdvCrimeSelectController,
      templateUrl: 'src/components/advCrimeSelect/index.html',
      bindings: { onChanges: '<', crimes: '<', selectedCrime: '<', groups: '<'}
    });

  AdvCrimeSelectController.$inject = ['$log'];
  function AdvCrimeSelectController($log) {
    var vm = this;

    vm.$onInit = construct;

    function construct() {
      vm.crimeChanged = crimeChanged;
      vm.openDdl = openDdl;
      vm.openGroups = openGroups;
      vm.ddlOpen = false;
      vm.openPerson = false;
      vm.openProperty = false;
      vm.openSociety = false;
      vm.groupName = " ";
    }

    function crimeChanged() {
      if (vm.onChanges)
        vm.onChanges({ crime: vm.selectedCrime });
    }

    function openDdl(){
      if(vm.ddlOpen == false)
        vm.ddlOpen = true;
      else {
        vm.ddlOpen = false;
      }
    }

    function openGroups(group){
      vm.groupName = group;
      console.log(vm.groupName);
    }

  }
})();  
 <div>
  <button ng-click="$ctrl.openDdl()" class="sans-serif col-12 field field-sm select border-blue">
    {{$ctrl.selectedCrime.crime}}</button>
    <div ng-show="$ctrl.ddlOpen" ng-repeat="g in $ctrl.groups">
      <button ng-click="$ctrl.openGroups(g.id)" class="sans-serif col-12 field select field-sm border-blue">
        {{g.text}}</button>
        <div ng-show="{{g.id}} == $ctrl.groupName">stuff</div>
    </div>
</div>

Сравнение в ng-show внутри цикла под кнопкой возвращает то же значение при нажатии, а также с помощью g.id . Итак, я не уверен, почему мой ng-show вообще не показывает div с «stuff». Условие должно быть истинным всякий раз, когда нажимается группа.

Комментарии:

1. Вы определяете функции, но не прикрепляете их к экземпляру контроллера. Попробуйте vm.crimeChanged = function...

2. @netoctone функции работают. crimeChanged еще не используется. В этом случае мне больше интересно, почему в моем html не отображается ng-show при сравнении двух одинаковых значений. Когда я нажимаю на один, таким образом, устанавливая groupName в значение, он не показывает div, который g.id имеет соответствующее значение для.

3. Другая возможная причина заключается в том, что {{g.id}} == $ctrl.groupName выражение не выполняется для нецифровых значений идентификатора. Попробуйте g.id == $ctrl.groupName вместо этого.

4. @netoctone, который это исправил. Как ни странно, это отображается в консоли как g.id вот почему я изначально поставил {{}} но спасибо вам за вашу помощь!