2015-12-21 40 views
0

我其中我要输出一些选择输入基于包含配置选项,如占位符文本,选择要使用的选择的对象上的情况下等捕获来自输入选择的值成,共同对象

我已经有这个工作,但我需要捕获在我可以用来建立一个查询字符串的通用对象中所做的每个选择 - 他们正在用于后续后端调用的一些过滤器选项。

我以为ng-model会成为我的朋友,但我不太确定它会如何,除非我有办法为对象动态设置一些命名属性。

这里是我的MD-选择标记,工作codepen可以发现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> 

我想有什么用输入选择填充像这样的目的是结束:

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

我知道我迄今为止所做的工作将不起作用,因为我试图使用相同的已命名的ng-model属性,所以它只是在每个选择上被覆盖。另外我没有过滤器名称,例如'TimePeriodFilter'可以从选择的选项中获得。

任何人都可以提供一些灵感,我怎么能得到这个工作?

回答

1

改变选择这样:

<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-模型。

+0

Duhhh,我怎么会错过!大脑褪色!谢谢@Victor – mindparse

1

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

$scope.filterBy = {}; 

现在,您可以从视图像$scope.filterBy内的每个属性分配,

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

</md-select> 

如果你有你的过滤器内部使用的过滤器名称的任何属性,你可以使用该属性。

0

回答在这里类似的东西: Show a list of items inside an ng-repeat when an input is selected with model

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>