在运行时创建下拉列表并在此之后绑定下拉值 - 不使用ngOptions

时间:2015-05-18 04:14:56

标签: javascript angularjs

我使用AngularJs在运行时生成下拉列表。我还想绑定相应的选项,这些选项将根据正在创建的下拉类型生成。

<div class="form-group" ng-repeat="attrib in col1Attribs">
    <label class="control-label" for="txtCode">{{attrib.displayText}}</label>
    <select class="form-control" 
         ng-options="item.configValue for item in configOptions(attrib.configType)" />
</div>

我的控制器有以下方法。

$scope.configOptions = function (type){
    return SmartCache.get(type); //SmartCache is my cacheFactory
}

修改

参数类型=&#39;状态&#39;

时,这是我的数据
[{"$id":"1","people":[],"configId":"STAT001","configValue":"Active","startDate":"2014-01-31T00:00:00","endDate":"9999-01-01T00:00:00","description":"Active","status":1,"parentId":null,"isSelectable":true,"timestamp":"AAAAAAAAKHM=","isSystemData":true,"children":[],"parent":null,"personAttributes":[],"items1":[]},{"$id":"2","people":[],"configId":"STAT002","configValue":"Suspended","startDate":"2014-01-31T00:00:00","endDate":"9999-01-01T00:00:00","description":"Suspended","status":1,"parentId":null,"isSelectable":true,"timestamp":"AAAAAAAAKHQ=","isSystemData":true,"children":[],"parent":null,"personAttributes":[],"items1":[]},{"$id":"3","people":[],"configId":"STAT003","configValue":"Terminated","startDate":"2014-01-31T00:00:00","endDate":"9999-01-01T00:00:00","description":"Terminated","status":1,"parentId":null,"isSelectable":true,"timestamp":"AAAAAAAAKHU=","isSystemData":true,"children":[],"parent":null,"personAttributes":[],"items1":[]},{"$id":"4","people":[],"configId":"STAT004","configValue":"Deleted","startDate":"2014-01-31T00:00:00","endDate":"9999-01-01T00:00:00","description":"Deleted","status":1,"parentId":null,"isSelectable":true,"timestamp":"AAAAAAAAKHY=","isSystemData":true,"children":[],"parent":null,"personAttributes":[],"items1":[]}]

我可以使用下面的代码但不使用ngOptions来完成我的任务。

<div class="form-group" ng-repeat="attrib in col1Attribs">
        <label class="control-label" for="txtCode">{{attrib.displayText}}</label>
        <select class="form-control">
        <option ng-repeat="c in configOptions(attrib.configType)" value="{{c.configId}}">
           {{c.configValue}}</option>
    </div>
</div>

试试这个jsFiddle

2 个答案:

答案 0 :(得分:0)

我无法看到您的其余代码。以下是如何创建下拉列表的片段:

 <div class="equalHW year">2015</div>
 <div class="eqWrap">
    <div class="equalHW month">Jan</div>
    <div class="equalHW month">Feb</div>
    <div class="equalHW month">Mar</div>
 </div>
  <div class="eqWrap">
    <div class="equalHW day">1</div>
    <div class="equalHW day">2</div>
    <div class="equalHW day">3</div>
    <div class="equalHW day">4</div>
    <div class="equalHW day">5</div>
    <div class="equalHW day">6</div>
    <div class="equalHW day">7</div>
    <div class="equalHW day">8</div>
    <div class="equalHW day">1</div>
    <div class="equalHW day">2</div>
    <div class="equalHW day">3</div>
    <div class="equalHW day">4</div>
    <div class="equalHW day">5</div>
    <div class="equalHW day">6</div>
    <div class="equalHW day">7</div>
    <div class="equalHW day">8</div>
    <div class="equalHW day">1</div>
    <div class="equalHW day">2</div>
    <div class="equalHW day">3</div>
    <div class="equalHW day">4</div>
    <div class="equalHW day">5</div>
    <div class="equalHW day">6</div>
    <div class="equalHW day">7</div>
    <div class="equalHW day">8</div>
 </div>
 
  <div class="equalHW year">2016</div>
 <div class="eqWrap">
    <div class="equalHW month">Jan</div>
    <div class="equalHW month">Feb</div>
    <div class="equalHW month">Mar</div>
 </div>
  <div class="eqWrap">
    <div class="equalHW day">1</div>
    <div class="equalHW day">2</div>
    <div class="equalHW day">3</div>
    <div class="equalHW day">4</div>
    <div class="equalHW day">5</div>
    <div class="equalHW day">6</div>
    <div class="equalHW day">7</div>
    <div class="equalHW day">8</div>
    <div class="equalHW day">1</div>
    <div class="equalHW day">2</div>
    <div class="equalHW day">3</div>
    <div class="equalHW day">4</div>
    <div class="equalHW day">5</div>
    <div class="equalHW day">6</div>
    <div class="equalHW day">7</div>
    <div class="equalHW day">8</div>
    <div class="equalHW day">1</div>
    <div class="equalHW day">2</div>
    <div class="equalHW day">3</div>
    <div class="equalHW day">4</div>
    <div class="equalHW day">5</div>
    <div class="equalHW day">6</div>
    <div class="equalHW day">7</div>
    <div class="equalHW day">8</div>
 </div>

演示:http://plnkr.co/edit/YcuqZ1gs4iDAAgfLrZPO?p=preview

答案 1 :(得分:0)

可能你正在尝试这个

使用as

<select class="form-control" 
         ng-options="item.configId as item.configValue for item in configOptions(attrib.configType)" />

configId将选项值和configValue添加为显示值。