Angular过滤器服务器端生成select（下拉列表）-Angularfilterserversidegeneratedselect(dropdown)

0  

I highly recommend you to use AngularJS to generate HTML on the client side, and get the JSON data from the server.

我强烈建议您使用AngularJS在客户端生成HTML,并从服务器获取JSON数据。

Trigger action on parent select change

    Parent option 1
    Parent option 2
    
    Parent option 2000

This will trigger filterChildSelect(parentSelectValue) on your controller when the value selected changes.

当选定的值发生更改时,这将触发控制器上的filterChildSelect(parentSelectValue)。

Populate child select with server data

In your controller define the variable with your JSON data. For the sake of simplicity I will define an static array, but this should be the JSON data from your server

在您的控制器中使用您的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);

Then iterave over it in your view:

然后在您的视图中迭代它:

    {{child.name}}

Define your filtering function in your controller

Define a function which iterates over your original data and pushes to a temprary array the elements which pass some filter. Then assign that temprary array to your $scope.childData array.

定义一个迭代原始数据的函数,并将通过某些过滤器的元素推送到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;
}

0  

I think that a problem with generating this server-side is after you have selected an option in the parent (which filters the child options), and then select another option in paren, you need to keep track of what options were there to begin with.

我认为生成这个服务器端的问题是在父选择了一个选项(过滤子选项),然后在paren中选择另一个选项后,你需要跟踪哪些选项开始。

I would suggest providing angular with the options for both .

我建议为

提供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},
  ];
}
...

...

  
  
  
  

...