如何在角度中填充选择选项

时间:2017-04-07 07:16:46

标签: angularjs

我有一个动态创建的数据。基于此,我正在创建一个表单。但问题是选项没有添加到选项中。这有什么不妥。

customerB :
        {
            rows:3,
            columns: 2,
            name: 'customerB',
            fields:
            [
                {type: "select", name:"teacher_id", label: "Teacher" , endpoint: "/teachers", required: true, check:[ { id : "1982", name : "Mr Bob"}, { id : "18273", name : "Mrs Katrine"} ]}
            ], 
        }

HTML

<div class="rows" ng-repeat="field in customerB">
     <div class="columns" ng-repeat="newvalue in field"> 
          <div class="controls" ng-switch="newvalue.type"> 
             <div class="form-group"> 
               <label class="control-label">{{newvalue.label}}</label> 
               <select class="form-control" ng-switch-when="select" ng-model="hiii" ng-required="newvalue.required" ng-options="item.id as item.name for item in newvalue.check">
               </select>
             </div> 
          </div> 
     </div> 
</div>

2 个答案:

答案 0 :(得分:1)

你有一个有一个数组的对象,在数组中你得到另一个没有正确操作的数组 尝试了解以下代码段:
HTML:

<select name="repeatSelect" id="repeatSelect">
  <option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
</select>

JS

availableOptions: [
      {id: '1', name: 'Option A'},
      {id: '2', name: 'Option B'},
      {id: '3', name: 'Option C'}
    ]

或点击链接:https://docs.angularjs.org/api/ng/directive/select

答案 1 :(得分:1)

这个假设可能是错误的,但我认为在ng-repeat="field in customerB"这里你没有使用范围变量直接访问对象属性。因此,您需要在属性名称前添加范围变量名称。

<div class="rows" ng-repeat="field in obj.customerB">

除了您提供的代码之外,您的工作非常完美。

演示

&#13;
&#13;
angular.module("app",[])
.controller("ctrl",function($scope){

$scope.obj = { customerB :
        {
            rows:3,
            columns: 2,
            name: 'customerB',
            fields:
            [
                {type: "select", name:"teacher_id", label: "Teacher" , endpoint: "/teachers", required: true, check:[ { id : "1982", name : "Mr Bob"}, { id : "18273", name : "Mrs Katrine"} ]}
            ], 
        }}
         

})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div class="rows" ng-repeat="field in obj.customerB">
   <div class="columns" ng-repeat="newvalue in field">
      <div class="controls" ng-switch="newvalue.type">
         <div class="form-group"> <label class="control-label">{{newvalue.label}}</label> <select class="form-control" ng-switch-when="select" ng-model="hiii" ng-required="newvalue.required" ng-options="item.id as item.name for item in newvalue.check"></select> </div>
      </div>
   </div>
</div>
</div>
&#13;
&#13;
&#13;