Отфильтровать ng-options из выбора ng-options

Я надеюсь решить три проблемы...

На моей странице приложения у меня есть один выбор для штатов и другой для округов. Для состояний у меня есть:

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

Данные:

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

Для выбора округа у меня есть:

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

Данные:

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

Это мой 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>

Итак, как вы можете видеть, я использую stateID для выбора штата, а для выбора округа у меня есть соответствующий идентификатор штата, установленный в co_state_id в наборе данных округа.

Я хотел бы сделать несколько вещей:

  1. Скройте выбор округа, пока не будет выбран штат.
  2. После выбора штата отфильтруйте параметры выбора округа по выбранным параметрам stateID / co_state_id.
  3. Отфильтруйте ng-repeat сначала по stateID, затем по countyID.

Я также не вижу способа установить filter.stateID в true или отфильтровать по числу вместо строки. когда я фильтрую по stateID, я получаю смешанные результаты, потому что в некоторых stateID может быть «1».


angularjs angularjs-ng-repeat ng-options angularjs-ng-options
person webmaster_sean    schedule 29.03.2015    source источник
comment
добавьте fiddle или plunkr, пожалуйста   -  person Pankaj Parkar    schedule 29.03.2015
comment
Привет, @pankajparkar, пожалуйста, ознакомьтесь с решением DTing ниже, там есть ссылка для запуска фрагмента кода. Я попытаюсь поработать над плунжером позже, но у меня график банкоматов, и мне нужно продвигаться вперед.   -  person webmaster_sean    schedule 30.03.2015

Ответы (1)


arrow_upward
28
arrow_downward

Обычно вы хотите задать только один вопрос в посте, но я попробую эти три.

Часть 1. Добавьте ng-show вместо filter.stateID. Поскольку вы не можете отменить выбор состояния, вы можете использовать однократную привязку, если ваш angular равен ^ 1.3.

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

Часть 2. Добавьте фильтр для {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 }">

Часть 3:

Вы используете объект шаблона для фильтра, не имеет значения, если значение идентификатора равно 1:

Объект: объект шаблона можно использовать для фильтрации определенных свойств объектов, содержащихся в массиве. Например, предикат {name:"M", phone:"1"} вернет массив элементов, имя свойства которых содержит "M", а свойство phone содержит "1". Можно использовать специальное имя свойства $ (как в {$:"text"}), чтобы принять совпадение с любым свойством объекта или его вложенными свойствами объекта. Это эквивалентно простому сопоставлению подстроки со строкой, как описано выше. Предикат можно инвертировать, поставив перед строкой префикс !. Например, предикат {name: "!M"} вернет массив элементов, имя свойства которых не содержит "M".

Рабочий фрагмент

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>

person dting    schedule 29.03.2015
comment
Спасибо, DTing, я все еще тестирую ваше решение, прежде чем проверить его как ответ, но я думаю, что это очень приблизило меня. Я все еще получаю некоторую странность - например, я могу выбрать Алабаму, которая должна дать один результат, но показывает 300 результатов из Луизианы, Айдахо и Гавайев... Большинство других штатов отлично фильтруют результаты, лишь некоторые из них не работают, поэтому Я все еще пытаюсь выяснить, не сделал ли я что-то неправильно в своем контроллере или данных. Я также преобразовал свои идентификаторы в числа вместо строк, используя parseInt().. - person webmaster_sean; 30.03.2015
comment
@webmaster_sean Я не могу помочь с этим, если вы не опубликуете где-нибудь свой код (или, что еще лучше, новый вопрос). Удачи! - person dting; 30.03.2015
comment
после еще нескольких тестов я проверяю ваше решение как ответ, потому что оно решило часть 1 и часть 2 - часть 3 - это то, над чем я все еще пытаюсь работать ... может быть, в другом вопросе, когда я смогу понять больше, в чем проблема является. Для дальнейшего использования я постараюсь опубликовать вопросы только с одной частью ;-) - person webmaster_sean; 30.03.2015