Angular过滤器服务器端生成选择(下拉列表) - Angular filter server side generated select(dropdown)

我想知道是否有可能在某些条件下由angularjs过滤的服务器上生成<option>元素的<select>。

让我们假设以下场景。我们有两个<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格式的数据，然后填充它(这是我看到的传统方法，然后在客户端生成选择的HTML)?

我想保持HTML在服务器端生成。BTW服务器是Apache，我使用PHP。

谢谢。

我强烈建议你在客户端使用AngularJS生成HTML，然后从服务器端获取JSON数据。

触发父操作select change

<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)。

用服务器数据填充子select

在控制器中用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;
}

我认为生成此服务器端的问题是在您在父选项中选择一个选项(过滤子选项)之后，然后在父选项中选择另一个选项，您需要跟踪开始时有哪些选项。

我建议为angular提供<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>