динамическое удаление / добавление параметров из выпадающего списка/в с помощью angularjs

На моем угловом шаблоне есть набор каскадных выпадающих списков (страна, штат, город), кнопка Добавить и таблица с кнопкой Удалить на каждой строке. Все данные в раскрывающихся списках извлекаются из asp.net webapi нефильтрованный во время загрузки. Я пытаюсь сделать поток с фильтром:

  1. Когда все выпадающие значения выбраны, нажав кнопку Добавить, значение будет добавлено в таблицу под ним. Значение скрыто (не удалено) из раскрывающегося списка.
  2. При нажатии на кнопку Удалить в соответствующей строке таблицы будет удалена (не скрыта) строка. Если удаленный город все еще находится в раскрывающемся списке, он будет не скрыт.
  3. Во время загрузки раскрывающемуся списку города также необходимо отфильтровать значение, уже содержащееся в таблице.
  4. При каждом нажатии кнопки Ajax будет публиковаться в webapi для обновления базы данных сервера

Данные таблицы представляют собой массив объектов с 7 полями (id, countryId, country, stateId, state, cityId, city), как показано ниже.

[{
  id: 1,
  level1id: 101,
  level1: 'USA',
  level2id: 39,
  level2: 'California',
  level3id: 4210,
  level3: 'San Diego'
}, {
  id: 19,
  level1id: 101,
  level1: 'USA',
  level2id: 33,
  level2: 'Oregon',
  level3id: 5905,
  level3: 'Portland'
}, {
  id: 1,
  level1id: 101,
  level1: 'USA',
  level2id: 690,
  level2: 'Washington',
  level3id: 1223,
  level3: 'Seattle'
}]

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

[{
  id: 3521,
  city: 'San Francisco'
}, {
  id: 5234,
  city: 'Los Angeles'
}, {
  id: 9792,
  city: 'New York'
}, {
  id: 8899,
  city: 'Chicago'
}]

1 ответ

  1. Можно создать настраиваемый фильтр, который будет принимать исходный массив городов (тот, который входит в раскрывающиеся списки) и список выбранных городов (тот, который входит в таблицу) и фильтровать выбранные города из списка всех городов.

    Основываясь на ваших объектах и предполагаяlevel3id, что это тот, который вы хотите фильтровать, вы можете пойти с этим:

      // This is the custom filter - add it to your model 
      app.filter('selectedCities', function() {
    
        /**
         * This will be the returned filter function
         * input is the list of cities that needs to be filtered
         * selected is the list of items in the table
         */
        return function(input, selected) {
    
          var selected_cities = {}
          var output = [];
    
          //first we create hash map with all the selected cities
          //This will enable us to locate a selected city in ~O(1)
          angular.forEach(selected, function(selected_city) {
    
            selected_cities[selected_city.level3id] = true;
    
          })
    
          /**
           * now we go through the cities.
           * we check if the city is in the hash of selected cities
           * if its not there - we add it to the output 
           */
          angular.forEach(input, function(city) {
    
              if (!(city.id in selected_cities)) {
                output.push(city)
              }
          })
    
          return output;
        }
    
      });
    

    В раскрывающемся списке у вас, вероятно , есть какой-то цикл, какng-repeat = "city in cities", и позволяет сказать, что имя объекта данных таблицыtable_selected_data, так что вы можете использовать фильтр, как это:

    ng-repeat = "city in cities | selectedCities:table_selected_data"