动态ng模型生成多个下降

时间:2017-04-19 01:26:05

标签: jquery angularjs

我需要根据mongodb集合中的数据动态生成多个下拉列表。

{
    "_id" : ObjectId("58f4fdd4c9fc145b279a1cc9"),
    "_class" : "com.zwayam.common.rg.mongodb.MasterDataFields",
    "entityType" : "Company",
    "editableFields" : {
        "industry" : "mappingFields.industry",
        "group" : "mappingFields.group"
    }
}

在上面的json对象行业中引用了表中的列名,而mappingFields.industry引用了它来自主列表的值,即。

{
    "_id" : ObjectId("58edd50e44ae5483c2eb2f34"),
    "_class" : "zwayam.common.rg.mongodb.MasterDataMap",
    "fieldName" : "masterData",
    "mappingFields" : {
        "function" : [ 
            "Chartered Accountant/CPA", 
            "Chartered Accountant", 
            "Accounting", 
            "Tax", 
            "Company Secretary", 
            "Audit", 
            "Direct Sales Agent/Insurance Agents", 
            "Hotel / Restaurant", 
            "Content / Editors / Journalists", 
            "Finance", 
            "Consulting / Strategy / Corporate Planning"
        ],
        "industry" : [ 
            "Biotechnology/Pharmaceutical/Medicine", 
            "CRM/CallCentres/BPO/ITES/MedTrans", 
            "Educational/Training", 
            "Recruitment/Placement Agencies", 
            "Engineering/Projects", 
            "Entertainment/Media", 
            "Financial Services/Stockbroking"
        ],
        "group" : [ 
            "group 1", 
            "group 2", 
            "group 3", 
            "group 4", 
            "group 5", 
            "group 6", 
            "group 7"
        ],
        "scale" : [ 
            "scale 1", 
            "scale 2", 
            "scale 3", 
            "scale 4", 
            "scale 5", 
            "scale 6", 
            "scale 7"
        ],
        "type" : [ 
            "type 1", 
            "type 2", 
            "type 3", 
            "type 4", 
            "type 5", 
            "type 6", 
            "type 7"
        ]
    }
}

我可以填充列表,我已经从下面的代码中完成了

        <div class="col-sm-12 ats-display editCompany"
             ng-repeat="(key,value) in dataList">
            <label for="workflowDefination"
                class="control-label workflowLabel">
                {{key}}
            </label> 
            <select ng-model="CompanyFields.value" ng-click="getfield();"
                id="{{key}}" class="form-control" 
                ng-options="CompanyFields for CompanyFields in dataValueList.{{value}}" >
                <option value="" label="Select the value"></option>
            </select>
            {{CompanyFields}}
            <div class="col-sm-12" style="height: 17px;"></div>
        </div>

但我不知道如何为这些下拉菜单设置ng-model,并从每次下拉菜单中获取用户选择的值。任何人都可以告诉我如何为上述要求设置动态ng模型吗?

2 个答案:

答案 0 :(得分:0)

我通过设置ng-model ="CompanyObj[key]" CompanyObj是一个json对象

来解决我的问题
   <div class="col-sm-12 ats-display editCompany" ng-repeat="(key,value) in dataList">
    <label for="workflowDefination" class="control-label workflowLabel">{{key}}</label>
    <select ng-model="CompanyObj[key]" ng-click="getfield(CompanyFields[value]);" id="{{key}}" class="form-control" ng-options="CompanyFields for CompanyFields in dataValueList.{{value}}">
        <option value="" label="Select the value"></option>
    </select>
    {{CompanyFields}}
    <div class="col-sm-12" style="height: 17px;">

    </div>

</div>

答案 1 :(得分:0)

我们可以使用$eval来解析对象中的表达式。 Plunker

JS:

 <div ng-repeat = "(key,value) in parentdata.editableFields" >
      {{key}}
    <select id="{{key}}" ng-model="selectedQuery"  ng-options="key as value for (key,value) in $eval('jsondata.'+value)">  
                <option value="" label="Select the value"></option> 
    </select>
    </div>