如何使用angularjs動態刪除/添加選項到/到下拉列表

Question

在我的Angular模板上，每行有一組級聯下拉列表（Country，State，City），一個Add按鈕和一個帶有Delete按鈕的表格。下拉菜單中的所有數據都是從加載時未經過濾的asp.net webapi中檢索的。我正在嘗試使用過濾器進行流動：

1. 當選擇了所有下拉值後，單擊添加按鈕，該值將被添加到它下面的表格中。該值從下拉菜單中隱藏（未刪除）。
2. 單擊相應表格行中的刪除按鈕時，它將刪除（不隱藏）該行。如果刪除的城市仍處於下拉菜單中，則它將被隱藏。
3. 在加載時間，城市下拉菜單也需要過濾表中已有的值。
4. 每個按鈕點擊將阿賈克斯後到的WebAPI到更新服務器數據庫

表數據是對象的有7個字段（ID，countryId，國家，STATEID，州，cityId，市）像一個數組下面。

[{ 
 
    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' 
 
}]

Answer 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"