无法在角度JS中设置所选选项?

时间:2017-01-16 12:28:09

标签: angularjs

下面是我选择下拉列表的html代码。

<div class="panelProfileDefault col-md-11" ng-repeat="profile in allPanelData">
  <form name="updateProfile" class="setProfile" ng-submit="updateProfile(updateProfile)" novalidate>
                <div class="modal-body col-md-10">
                    <div class="form-group col-md-5" ng-class="{ 'has-error' : updateProfile.profileName.$invalid && updateProfile.profileName.$dirty}">
                            <div class="col-sm-12 col-md-12">
                                <input type="text" class="" id="profileName" name="profileName" ng-model="profile.Name" placeholder="Element" required ng-disabled="isDisabled"/>
                                <div ng-messages='setProfile.profileName.$error' ng-if='submitted  || setProfile.profileName.$dirty'>
                                    <div ng-message='required' class="has-error">Please Enter the value for this field</div>
                                </div>
                            </div>
                    </div>

                    <div class="form-group col-md-5" ng-class="{ 'has-error' : setProfile.profileType.$invalid && setProfile.profileType.$dirty}">
                        <div class="col-sm-12 col-md-12">
                            <select class="transparent-textbox" ng-model="profile.TypeID"  name="profileType" required ng-disabled="isDisabled">
                                    <option value="0" disabled>Element Type</option>
                                    <option value="1">Text</div>
                                    <option value="2">Float</div>
                                    <option value="3">Date</div>
                                    <option value="4">Object</div>
                                    <option value="5">Long</div>
                            </select>
                            <div ng-messages='setProfile.profileType.$error' ng-if='submitted || setProfile.profileType.$dirty'>
                                <div ng-message='required' class="has-error">Please select the profileType</div>
                            </div>
                        </div>
                    </div>
                </div>
  </form>
 </div>

正在做的是点击某个div调用一个api并获取数据作为响应。

$http.get(__env.apiUrl+'/UserPanelPanellists/GetProfileVariables?panelID=' + panelId, {
                      headers: { 'Content-Type': 'application/json','SessionID':$rootScope.token}
                  }).then(function(success){
                    console.log(success.data);
                      $scope.allPanelData = success.data;
                      $scope.$emit('unload'); 
                  },function(http, status, fnc, httpObj){
                    $scope.$emit('unload'); 
                    console.log('data retrieval failed.',http,status,httpObj);
                });

但现在无法在选择下拉列表中显示数据,即$scope.allPanelData.TypeID =1然后选择值为&#39; 1&#39;也应该为其他人选择和相同

当我控制$ scope.allPanelData时,它看起来像这样。

enter image description here

如何解决?

1 个答案:

答案 0 :(得分:1)

你能用ng-options代替ng-repeat吗?

$scope.typeOpts = [
                   {type: "Text", id : 1 },
                   {type: "Float", id :  2 },
                   {type: "Date", id : 3 },
                   {type: "Object" , id :  4 },
                   {type: "Long" , id :  5 }
                  ];

然后像这样使用它:

<select class="transparent-textbox" ng-model="profile.TypeID" name="profileType" required ng-disabled="isDisabled" 
    data-ng-options=" type.id as type.type for type in typeOpts ">
        <option value="0">Element Type</option>
 </select>