wie man dynamisch Optionen aus/in Dropdown mit angularjs entfernt

Question

Auf meiner Angular-Vorlage gibt es eine Reihe von Dropdown-Cascade (Land, Staat, Stadt), eine Schaltfläche Hinzufügen und eine Tabelle mit Löschen-Taste in jeder Zeile. Alle Daten in den Dropdown-Listen werden zum Zeitpunkt des Ladevorgangs ungefiltert von asp.net webapi abgerufen. Ich versuche, den Fluss mit Filter zu tun:

1. Wenn alle Dropdown-Werte ausgewählt sind, klicken Sie auf die Schaltfläche Hinzufügen, der Wert wird einer Tabelle darunter hinzugefügt. Der Wert ist ausgeblendet (nicht gelöscht).
2. Wenn Sie auf die Schaltfläche Löschen in der entsprechenden Tabellenzeile klicken, wird die Zeile gelöscht (nicht ausgeblendet). Wenn sich die gelöschte Stadt noch im Dropdown befindet, wird sie nicht verborgen.
3. Während der Ladezeit muss das Dropdown-Feld Stadt auch den Wert aus der Tabelle herausfiltern.
4. wird Jeder Knopf klicken Ajax Post an die WebAPI
die Server-Datenbank zu aktualisieren

Die Tabellendaten ist ein Array von Objekten mit 7 Feldern (id, countryid, Land, StateID, Staat, cityId, Stadt) wie unten.

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

Nach dem Filter Seattle, Portland aufbringt und San Diego wird aus dem Drop-Down entfernt werden.

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

Answer 1

Sie können einen benutzerdefinierten Filter erstellen, die die ursprüngliche Städte Array (die, die in den Drop-downs geht) und die Liste der ausgewählten Städte erhalten (die, die in die geht Tabelle) und filtert die ausgewählten Städte aus der Liste aller Städte heraus.

Basierend auf Ihre Objekte und level3id unter der Annahme ist, die Sie filtern möchten, können Sie mit diesem gehen kann:

// 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; 
    } 

    }); 

im Dropdown wahrscheinlich Sie einige Schleife wie ng-repeat = "city in cities" haben, und die können sagen, Tabelle Daten Objektname ist table_selected_data, so können Sie den Filter wie folgt verwenden:

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