角度過濾器服務器端生成的選擇（下拉）

Question

我想知道是否有可能<select>在某些條件下由angularjs過濾后在服務器上生成的<option>元素。

讓我們假設以下情況。 我們有兩個<select>元素。

<select id="parent">
    <option>Parent option 1</option>
    <option>Parent option 2</option>
    ...
    <option>Parent option 2000</option>
</select>

<select id="child">
    <option>Parent option 1 Child 1</option>
    <option>Parent option 1 Child 2</option>
    ...
    <option>Parent option 1 Child 1000</option>

    <option>Parent option 2 Child 1</option>
    <option>Parent option 2 Child 2</option>
    ...
    <option>Parent option 2 Child 1000</option>

    ......

    <option>Parent option 2000 Child 1</option>
    <option>Parent option 2000 Child 2</option>
    ...
    <option>Parent option 2000 Child 1000</option>
</select>

因此，當選擇父選項時，則過濾子<select> 。

我應該建立一個例程來讀取javascript中數組的所有選項嗎？

還是我應該對服務器進行ajax調用以獲取json數據，然后進行填充（這是我做慣的傳統方法，然后在客戶端生成selects的HTML）？

我想讓HTML在服務器端生成。 BTW服務器是Apache，我使用PHP。

謝謝。

Answer 1

我認為生成此服務器端的問題是在父級中選擇了一個選項（它過濾子級選項），然后在paren中選擇了另一個選項后，您需要跟蹤從那里開始的選項。

我建議同時為<select>提供角度選項。

如果angular具有選項列表，並且它們的結構類似這樣，則過濾將是微不足道的。

...
function controller() {
  var vm = this;
  vm.parentValue = null;
  vm.childValue = null;

  vm.parentOptions = [
    {key: 'parent 1', value: 1},
    {key: 'parent 2', value: 2},
  ];
  vm.childOptions = [
    {key: 'parent 1 child 1', value: 'parent1_child1', category: 1},
    {key: 'parent 1 child 2', value: 'parent1_child1', category: 1},
    {key: 'parent 2 child 1', value: 'parent2_child1', category: 2},
    {key: 'parent 2 child 2', value: 'parent2_child2', category: 2},
  ];
}
...

<html>
...
<div ng-controller="controller as ctrl">
  <select ng-model="ctrl.parentValue"
          ng-options="parent.key as parent.value for parent in ctrl.parentOptions">
  </select>
  <select ng-model="ctrl.childValue" 
          ng-options="child.key as child.value for child in ctrl.childOptions | filter:{category: ctrl.parentValue}">
  </select>
</div>
...
</html>

Answer 2

我強烈建議您使用AngularJS在客戶端生成HTML，並從服務器獲取JSON數據。

觸發對父級選擇更改的操作

<select id="parent" ng-model="parentSelectValue" ng-change="filterChildSelect(parentSelectValue)">
    <option value="parentValue1">Parent option 1</option>
    <option value="parentValue2">Parent option 2</option>
    <!-- ... -->
    <option value="parentValue2000">Parent option 2000</option>
</select>

當所選值更改時，這將觸發控制器上的filterChildSelect(parentSelectValue) 。

用服務器數據填充子選擇

在控制器中，使用JSON數據定義變量。 為了簡單起見，我將定義一個靜態數組，但這應該是您服務器中的JSON數據

$scope.childDataOriginal = [
    {
        name: "Child name 1",
        value: "child1"
    }, {
        name: "Child name 2",
        value: "child2"
    }
];
// Iterave over a copy of the original data in order not to modify it when filtering
$scope.childData = angular.copy($scope.childDataOriginal);

然后遍歷您的視圖：

<select id="child">
    <option ng-repeat="child in childData" value="{{child.value}}">{{child.name}}</option>
</select>

在控制器中定義過濾功能

定義一個對原始數據進行迭代的函數，並將通過某些過濾器的元素推送到臨時數組。 然后將該臨時數組分配給您的$scope.childData數組。

$scope.filterChildSelect = function (parentSelectedValue) {
    var i,
        childDataTmp = []

    for (i = 0; i < $scope.childDataOriginal.length; i = i + 1) {
        if (someCondition) {
            childDataTmp.push($scope.childDataOriginal[i]);
        }
    }

    $scope.childData = childDataTmp;
}

角度過濾器服務器端生成的選擇（下拉）

問題描述

2 個解決方案

解決方案1
0 2016-09-09 07:46:45

解決方案2
0 2016-09-09 07:52:02

觸發對父級選擇更改的操作

用服務器數據填充子選擇

在控制器中定義過濾功能

角度過濾器服務器端生成的選擇（下拉）

問題描述

2 個解決方案

解決方案1 0 2016-09-09 07:46:45

解決方案2 0 2016-09-09 07:52:02

觸發對父級選擇更改的操作

用服務器數據填充子選擇

在控制器中定義過濾功能

解決方案1
0 2016-09-09 07:46:45

解決方案2
0 2016-09-09 07:52:02