Question

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

让我们假设以下情况。我们有两个<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。

感谢。

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>

在控制器中定义过滤功能

定义一个迭代原始数据的函数，并将通过某些过滤器的元素推送到temprary数组。然后将该temprary数组分配给$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（下拉列表）

2 个答案:

对父选择更改的触发操作

使用服务器数据填充子选项

在控制器中定义过滤功能