Lọc ng-tùy chọn từ lựa chọn ng-options

Question

Tôi hy vọng sẽ giải quyết ba vấn đề ...

Trong trang ứng dụng của tôi, tôi có một lựa chọn cho các tiểu bang và một cho các quận. Đối với các quốc gia tôi có:

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

dữ liệu:

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

Đối County tôi chọn tôi có:

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

dữ liệu:

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

Đây là tôi 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> 

Vì vậy, như bạn có thể thấy tôi đang sử dụng stateID về tình trạng lựa chọn và trên quận chọn Tôi có id trạng thái tương ứng đặt trong co_state_id trong tập dữ liệu quận.

Tôi muốn làm một vài điều:

1. Ẩn quận chọn cho đến khi tình trạng được chọn.
2. Sau một trạng thái được chọn, lọc chọn tùy chọn quận do chọn stateID/co_state_id
3. Lọc các ng-repeat bởi đầu tiên stateID, sau đó bởi các countyID.

Tôi cũng chưa thấy cách đặt filter.stateID thành true hoặc lọc theo số thay vì chuỗi. khi tôi lọc theo stateID, tôi nhận được kết quả hỗn hợp bởi vì một số kết quả khác nhau của stateID có thể có "1" trong số đó ..

Answer 1

Thông thường bạn chỉ muốn đặt một câu hỏi cho mỗi bài đăng nhưng tôi sẽ cung cấp ba câu hỏi này.

Phần 1: Thêm ng-show cho filter.stateID. Vì bạn không thể bỏ chọn một trạng thái, bạn có thể sử dụng một ràng buộc một lần nếu góc của bạn là^1.3.

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

Phần 2: Thêm bộ lọc cho {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 }"> 

Phần 3:

Bạn đang sử dụng các đối tượng mẫu cho bộ lọc, không nên quan trọng nếu giá trị của id là 1:

Đối tượng: Một đối tượng mẫu có thể được sử dụng để lọc các thuộc tính cụ thể trên các đối tượng chứa trong mảng. Ví dụ: thuộc tính {name: "M", phone: "1"} sẽ trả về một mảng các mục có tên thuộc tính chứa "M" và điện thoại thuộc tính có chứa "1".Một tên thuộc tính đặc biệt $ có thể được sử dụng (như trong {$: "text"}) để chấp nhận một trận đấu với bất kỳ thuộc tính nào của đối tượng hoặc thuộc tính lồng nhau của nó. Điều đó tương đương với chuỗi con phù hợp đơn giản với một chuỗi như mô tả ở trên. Các vị từ có thể được phủ định bằng cách tiền tố chuỗi với! Ví dụ, thuộc tính {name: "! M"} sẽ trả về một mảng các mục có tên thuộc tính không chứa "M".

Working Snippet

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>