9

3つの問題を解決したい...

私のアプリ ページでは、州用に 1 つ、郡用に 1 つ選択しています。私が持っている州の場合：

<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、州の選択と郡の選択を使用しています。対応する州の IDco_state_idが郡のデータ セットに設定されています。

私はいくつかのことをしたいと思います：

  1. 州が選択されるまで郡の選択を非表示にします。
  2. stateID州が選択された後、選択された/で郡の選択オプションをフィルタリングしますco_state_id
  3. ng-repeat最初にstateIDで、次に で をフィルタリングしcountyIDます。

filter.stateIDまた、文字列の代わりに数値を設定trueまたはフィルタリングする方法もわかりません。stateID でフィルタリングすると、一部stateIDの に「1」が含まれている可能性があるため、さまざまな結果が得られます..

4

1 に答える 1

28

通常、投稿ごとに 1 つの質問だけを行いますが、これら 3 つを試してみます。

パート 1ng-show : forを追加しfilter.stateIDます。状態を選択解除できないため、角度が ^1.3 の場合は、1 回限りのバインドを使用できます。

<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 :

フィルターにパターン オブジェクトを使用しています。id の値が 1 であるかどうかは問題ではありません。

オブジェクト: パターン オブジェクトを使用して、配列に含まれるオブジェクトの特定のプロパティをフィルター処理できます。たとえば、{name:"M", phone:"1"} 述語は、"M" を含むプロパティ name と "1" を含むプロパティ phone を持つアイテムの配列を返します。特殊なプロパティ名 $ を ({$:"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>

于 2015-03-29T18:26:57.123 に答える