将输入中的选定值捕获到公共对象中

Question

我有一个场景，我想根据包含配置选项的对象输出一些 select 输入，例如占位符文本、用于 select 的选项等

我已经有了这个工作，但我需要捕获在一个公共对象中生成的每个 selection，我可以用它来构建查询字符串 - 它们被用于一些过滤器选项随后的后端调用。

我认为 ng-model 会是我的朋友，但我不确定它会不会，除非我有办法动态地在对象上设置一些命名属性。

这是我的 md-select 标记，可以找到可用的代码笔 here

<md-select flex ng-model="filterBy.test" ng-repeat="filter in availableFilters" placeholder="{{filter.placeholder}}">
    <md-option ng-repeat="option in filter.data" value="{{option.value}}">
        {{option.description}}
    </md-option>
</md-select>

我想要的是最终得到一个从输入 selections 填充的对象，如下所示：

filterBy = {
    TimePeriodFilter: 'last24',
    OtherFilter: 2
}

我知道到目前为止我所做的是行不通的，因为我正在尝试使用同名的 ng-model 属性，所以它只是在每个 selection 上被覆盖。我也没有过滤器名称，例如 'TimePeriodFilter' 可从 selected 选项获得。

任何人都可以提供一些关于如何使它工作的灵感吗？

Answer 1

将 select 更改为：

<md-select flex ng-model="filterBy[filter.name]" ng-repeat="filter in availableFilters" placeholder="{{filter.placeholder}}">
              <md-option ng-repeat="option in filter.data" value="{{option.value}}">
                {{option.description}}
              </md-option>
            </md-select>

查看 ng 模型。

Answer 2

将您的过滤器模型初始化为控制器中的一个对象。

$scope.filterBy = {};

现在您可以从 $scope.filterBy 的视图中分配每个属性，例如，

<md-select flex ng-model="filterBy[filter.placeholder]" ng-repeat="filter in availableFilters" placeholder="{{filter.placeholder}}">

</md-select>

如果您的过滤器中有任何带有过滤器名称的属性，您可以使用那个属性。

Answer 3

在这里回答了类似的问题：

https://plnkr.co/edit/OJm07aLJQTCVgWSGgnZt?p=preview

    <div ng-repeat="subj in subjects track by $index">
      <label>Prerequisites for {{subj.subjectCode}}</label>
      <input type="text" ng-model="multiPre[$index]" ng-click="test($index)">
  </div>
  <select ng-model="multiPre[selected]" multiple>
    <option ng-repeat="sb in subjects[selected].prerequisites">{{sb}}</option>
  </select>

将输入中的选定值捕获到公共对象中

Capturing selected values from inputs into a common object

angularjs

angular-material