web-dev-qa-db-fra.com

Filtrer ng-options dans la sélection ng-options

J'espère résoudre trois problèmes ...

Dans ma page d'application, j'ai une sélection pour les États et une autre pour les comtés. Pour les États que j'ai:

<select ng-model="filter.stateID" ng-options="item.stateID as item.state for item in st_option">
</select>

Données:

[
  { state="California", stateID="5"},
  { state="Arizona", stateID="3"},
  { state="Oregon", stateID="38"},
  { state="Texas", stateID="44"},
  { state="Utah", stateID="45"},
  { state="Nevada", stateID="29"}
]

Pour mon comté, sélectionnez J'ai:

<select ng-model="filter.countyID" ng-options="item.countyID as item.county for item in co_option">
 </select>

Données:

[
  { county="Orange", countyID="191", co_state_id="5"},
  { county="Multiple Counties", countyID="3178", co_state_id="3"},
  { county="Sonoma", countyID="218", co_state_id="38"},
  { county="Los Angeles", countyID="190", co_state_id="44"}
]

C'est mon ng-repeat:

<div ng-repeat="project in projects | filter:filter">
    <div>
        State: {{project.state}}<br> 
        County: {{project.county}}<br>
        <span ng-hide="{{project.stateID}}"></span>
        <span ng-hide="{{project.countyID}}"></span>
    </div>
</div>

Donc, comme vous pouvez le voir, j'utilise le stateID sur le State Select et sur le County Select, j'ai l'ID d'état correspondant défini dans co_state_id dans l'ensemble de données du comté.

J'aimerais faire quelques choses:

  1. Masquer la sélection du comté jusqu'à ce qu'un état soit sélectionné.
  2. Une fois qu'un état est sélectionné, filtrez les options de sélection du comté en fonction de stateID/co_state_id
  3. Filtrer le ng-repeat d'abord par le stateID, puis par le countyID.

Je ne vois pas non plus de moyen de définir filter.stateID à true ou filtrez par un nombre au lieu d'une chaîne. lorsque je filtre par stateID, j'obtiens des résultats mitigés car certains stateID peuvent contenir "1".

angularjsangularjs-ng-repeatng-optionsangularjs-ng-options
9
webmaster_sean

Habituellement, vous ne voulez poser qu'une seule question par message, mais je vais essayer ces trois-là.

Partie 1: Ajoutez un ng-show pour filter.stateID. Comme vous ne pouvez pas désélectionner un état, vous pouvez utiliser une liaison unique si votre angular est ^ 1.3.

<select ng-show="::filter.stateID" ng-model="filter.countyID" ng-options="item.countyID as item.county for item in co_option">

Partie 2: Ajouter un filtre pour {co_state_id : filter.stateID}

<select ng-show="::filter.stateID != null" ng-model="filter.countyID" ng-options="item.countyID as item.county for item in co_option | filter:{ co_state_id : filter.stateID }">

Partie:

Vous utilisez l'objet modèle pour le filtre, peu importe si la valeur de l'id est 1:

Objet: un objet de motif peut être utilisé pour filtrer des propriétés spécifiques sur des objets contenus dans un tableau. Par exemple, {nom: "M", prédicat phone: "1"} renverra un tableau d'éléments dont le nom de propriété contient "M" et le téléphone de propriété contient "1". Un nom de propriété spécial $ peut être utilisé (comme dans {$: "text"}) pour accepter une correspondance avec n'importe quelle propriété de l'objet ou ses propriétés d'objet imbriquées. Cela équivaut à la simple correspondance de sous-chaîne avec une chaîne, comme décrit ci-dessus. Le prédicat peut être annulé en préfixant la chaîne avec!. Par exemple, le prédicat {name: "! M"} renverra un tableau d'éléments dont le nom de propriété ne contient pas "M".

Extrait de travail

var app = angular.module('app', []);

app.controller('myController', function($scope) {
  $scope.projects = [{
    name: 'Project1',
    state: 'CA',
    stateID: '5',
    county: 'Orange',
    countyID: '191'
  }, {
    name: 'Project2',
    state: 'CA',
    stateID: '5',
    county: 'LosAngeles',
    countyID: '190'
  }, {
    name: 'Project3',
    state: 'CA',
    stateID: '5',
    county: 'Orange',
    countyID: '191'
  }, {
    name: 'Project4',
    state: 'MadeUp',
    stateID: '1',
    county: 'MadeUp',
    countyID: '190'
  }];

  $scope.st_option = [{
    state: "California",
    stateID: "5"
  }, {
    state: "Arizona",
    stateID: "3"
  }, {
    state: "Oregon",
    stateID: "38"
  }, {
    state: "Texas",
    stateID: "44"
  }, {
    state: "Utah",
    stateID: "45"
  }, {
    state: "Nevada",
    stateID: "29"
  }];

  $scope.co_option = [{
    county: "Orange",
    countyID: "191",
    co_state_id: "5"
  }, {
    county: "Multiple Counties",
    countyID: "3178",
    co_state_id: "3"
  }, {
    county: "Sonoma",
    countyID: "218",
    co_state_id: "38"
  }, {
    county: "Los Angeles",
    countyID: "190",
    co_state_id: "44"
  }];

  $scope.filter = {};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app='app' ng-controller='myController'>
  <select ng-model="filter.stateID" 
          ng-options="item.stateID as item.state for item in st_option"></select>
  <select ng-show="::filter.stateID" 
          ng-model="filter.countyID" 
          ng-options="item.countyID as item.county for item in co_option | filter:{ co_state_id : filter.stateID }">
  </select>

  <div ng-repeat="project in projects | filter:filter">
    <div>
      <br>Name: {{ project.name }}
      <br>State: {{project.state}}
      <br>County: {{project.county}}
      <br>
      <span ng-hide="{{project.stateID}} "></span>
      <span ng-hide="{{project.countyID}} "></span>
    </div>
  </div>
</div>
28
DTing