javascript - 从动态 JSON 数据级联父子选择框

Question

我已经根据将从服务器接收的 JSON 数据动态创建了一些链式选择框。链接/级联的工作方式是每个选择框都是一个具有以下属性的命名对象:

1. 父属性:作为此选择框对象的父对象的名称。

2. 选项:选项对象数组，其中每个对象包含:(a) 选项值 (b) 父选项值 - 当前值映射到的父选择框值。 (c) 选项 ID。

3. 选定选项:具有两个属性的对象:(a) 当前选定值 (b) 当前选定值的 ID。

我在“option”标签中使用 ng-repeat 或在“select”标签中使用 ng-option 创建选择框，然后我使用自定义过滤器，通过匹配选项值 (2 > a) 的父选项值 (2 > b) 及其父对象的“当前选定值”(3 > a)。基本上使用自定义过滤器进行从子选项值到选定父值的多对一映射。

我能够正确映射父子选择框，但问题是当我更改父选择框值时，其子对象的“选定选项值”不会更新(子选定项未获取筛选列表中的第一项，导致孙项下拉列表不更新。) ^[1]

有什么方法可以在父值发生变化时使用第一个选项值而不是当前的空白值来初始化子选择框(以及后续的子/孙)？

Here is the working plunker. (ng-重复实现)。非常感谢任何帮助。

这是 another plunker使用 ng-options 实现。

HTML(ng-repeat):

<div ng-repeat="selection in vm.selectionData">
    <div ng-repeat="(key, attribute) in selection.attributes">
      <span>{{key}}</span>
      <select class="form-control" ng-model="attribute.selectedOption.name">
        <option ng-repeat="option in attribute.options | optionFilter : selection.attributes[attribute.parentAttr]">{{option.name}}</option>
      </select>
    </div>
</div>

HTML(ng-选项):

<div ng-repeat="selection in vm.selectionData">
    <div ng-repeat="(key, attribute) in selection.attributes">
      <span>{{key}}</span>
      <select ng-model="attribute.selectedOption" ng-options="attribute.name for attribute in (attribute.options | optionFilter : selection.attributes[attribute.parentAttr]) track by attribute.id">
      </select>
    </div>        
</div>

JS:

myApp.filter('optionFilter', function() {
  return function(items, parent) {
    var result = [];
    if (parent) {
      for (var i = 0; i < items.length; i++) {
        console.log(items[0].parent, parent.selectedOption.name);
        if (items[i].parent === parent.selectedOption.name) {
          result.push(items[i]);
        }
      }
      return result;
    } else {
      return items;
    }
  }
});

myApp.controller("MyCtrl", function($scope) {

  this.selectionData = [{
    selectionType: "Geography",
    attributes: {
      country: {
        parentAttr: "none",
        options: [{
          name: "India",
          parent: "None",
          id: 1
        }, {
          name: "Bangladesh",
          parent: "None",
          id: 2
        }, {
          name: "Afganistan",
          parent: "None",
          id: 3
        }],
        selectedOption: {
          name: "India",
          id: 1
        }
      },
      state: {
        parentAttr: "country",
        options: [{
          name: "Rajasthan",
          parent: "India",
          id: 1
        }, {
          name: "Haryana",
          parent: "India",
          id: 2
        }, {
          name: "Dhaka",
          parent: "Bangladesh",
          id: 3
        }, {
          name: "Kabul",
          parent: "Afganistan",
          id: 4
        }],
        selectedOption: {
          name: "Rajasthan",
          id: 1
        }
      },
      city: {
        parentAttr: "state",
        options: [{
          name: "Kota",
          parent: "Rajasthan",
          id: 1
        }, {
          name: "Sirsa",
          parent: "Haryana",
          id: 2
        }, {
          name: "Alwar",
          parent: "Rajasthan",
          id: 3
        }, {
          name: "Gurgaon",
          parent: "Haryana",
          id: 4
        }, {
          name: "Kabul",
          parent: "Kabul",
          id: 5
        },{
          name: "Dhaka",
          parent: "Dhaka",
          id: 6
        }
        ],
        selectedOption: {
          name: "Kota",
          id: 1
        }
      }
    },
  }];

});

---

引用资料:

• Cascading select/dropdowns

Answer 1

经过一段时间的努力，我想出了一个解决方案(虽然不确定它是否符合最佳实践)。在基于父对象的选定选项值返回过滤选项的自定义过滤器中，我另外发送了当前选择框对象。然后，

1. 过滤器首先检查父对象是否存在，否则返回所有选项。
2. 如果父级存在，则循环遍历当前选择框对象的所有可用选项。
3. 如果当前选择框选项的父值与父对象的选定选项值匹配，则它会将过滤后的选项值推送到结果数组中，仅当父对象的选定选项不为空(当祖 parent 值更改时，父对象的选定选项可能会变为空，并且父对象不会获取过滤后的结果选项，从而导致父对象选择框中的第一个选项为空白)。这将暂时导致当前选择框完全为空，因为父对象的选定选项为空。
4. 然后，它检查当前选择框 对象的选定选项是否为空。如果是，它将结果数组的第一个元素(对象)分配给所选的选项对象，并返回结果数组。由于过滤器将针对所有选择框(祖 parent 、父对象和子对象)运行，因此它将父对象的已过滤数组中的第一个元素设置为父对象的选定选项。现在，当父对象的选定选项不再为 null 时，当前选择框将显示过滤后的选项(来自结果数组)，结果数组的第一个元素将分配给当前选择框的选定选项。

Working demo here.如果有更好的解决方案，请分享。下面是自定义过滤器:

myApp.filter('optionFilter', function() {
  return function(items, parent, self) {
    var result = [];
    if (parent) {
      for (var i = 0; i < items.length; i++) {
        if (parent.selectedOption !== null && items[i].parentValue === parent.selectedOption.value) {
          result.push(items[i]);
        }
      }
      if (self.selectedOption === null) {
        self.selectedOption = result[0];
      }
      return result;
    } else {
      return items;
    }
  }
});

HTML:

<div ng-repeat="(key, item) in data">
    <span>{{key}}</span>
    <select ng-model="item.selectedOption" ng-options="option.value for option in (item.availableOptions | optionFilter : data[item.parent] : item) track by option.id">
    </select>
</div>

数据:

this.data = {
  Country: {
    parent: "None",
    availableOptions: [{
      value: "United States",
      parentValue: "None",
      id: 1
    }, {
      value: "China",
      parentValue: "None",
      id: 2
    }, {
      value: "India",
      parentValue: "None",
      id: 3
    }],
    selectedOption: {
      value: "United States",
      parentValue: "None",
      id: 1
    }
  },
  State: {
    parent: "Country",
    availableOptions: [{
      value: "California",
      parentValue: "United States",
      id: 1
    }, {
      value: "Shanghai",
      parentValue: "China",
      id: 2
    }, {
      value: "Delhi",
      parentValue: "India",
      id: 3
    }],
    selectedOption: {
      value: "California",
      parentValue: "United States",
      id: 1
    }
  },
  City: {
    parent: "State",
    availableOptions: [{
      value: "Greenfield",
      parentValue: "California",
      id: 1
    }, {
      value: "Shanghai",
      parentValue: "Shanghai",
      id: 2
    }, {
      value: "New Delhi",
      parentValue: "Delhi",
      id: 3
    }],
    selectedOption: {
      value: "Greenfield",
      parentValue: "California",
      id: 1
    }
  }
};