Question

我使用$uibModal.open({})作为创建表单。在模态控制器内部，我最初在AngularJS中有一个选择框，它工作正常。

HTML

<div class="container">
<form name="genQForm" novalidate ctrl-generate-submit-key="submitForm(genQForm.$valid, qbeventInfo)">
    <div class="row">
        <div class="col-lg-6 col-md-7 col-sm-8 col-xs-8 pull-md-left" style="margin-top:10px;">
            <h4>{{ formHeader }}</h4>
            <hr style="margin:5px 0 15px 0;" />
        </div>
        <div id="form-validation" class="text-danger"></div>
    </div>
    <!-- ROW 1 : Event -->
    <div class="row form-group">
        <div class="col-lg-6 col-md-7 col-sm-8 col-xs-8 pull-md-left">
            <label for="eventID" class="col-lg-4 col-md-4 col-sm-8 col-xs-8 control-label">Event</label>
            <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12" ng-class="{ 'has-error' : genQForm.eventID.$invalid && !genQForm.eventID.$pristine }">
                <select id="eventID" name="eventID" 
                   ng-model="qbeventInfo.eventID"  
                   ng-change="eventchange()" required>
                   <option value="{{item.eventID}}" 
                       ng-repeat="item in eventLists">
                       {{item.title}}
                    </option>
                   </select>
            </div>
        </div>
    </div>

    <!-- Submit Button -->
    <div class="row" style="padding-bottom: 10px;">
        <div class="form-group">
            <div class="col-md-10">

                <button type="submit"
                        ng-show="isformButton" class="btn btn-light-green" xng-disabled="genQForm.$invalid"  tabindex="6"
                        ng-click="submitForm(genQForm.$valid, qbeventInfo)">
                   <span id="gensubmitBtn">{{formButton}}</span>
                </button>
                <button class="btn btn-light-red" ng-click="cancel()"  tabindex="7">Cancel</button>
            </div>
        </div>
    </div>

在我的Angular Controller中，$ scope.eventLists取自

app.controller.js

 task.getOpenEvent()     // this function is created from app.service
     .then(function (result) {
        console.info('open event lists :', result.data);
        $scope.eventLists = result.data;
     });

- 使用

打开模态

$uibModal.open({
    templateUrl: "pages/common/header/generateQ.html",
    size: size,
    scope: $scope,
    controller: function ($uibModalInstance, $scope, $window, task, $route) { ...

app.service.js

task.getOpenEvent = function () {
        var defer = $q.defer();

        $http.get(ev_service_url + '/0/openevent')
             .then(function (response) {
                 // Success
                 defer.resolve(response);
             }, function (err, status) {
                 // Error
                 defer.reject(err);
             });
        return defer.promise;
    }

我正在尝试用dxSelectBox devexpress样式替换此选择框。

<div dx-select-box="{dataSource: eventLists,
                     placeholder: 'Event Name',
                     valueExpr: 'eventID',
                     displayExpr: 'title'
                    }" >
</div>

我遵循devexpress tutorial的格式。我可以看到占位符，bUt选项列表为空。

为什么在DevExpress dxSelectBox中使用选项列表时没有显示？

Answer 1

尝试将dxSelectBox dataSource选项包装到bindingOptions中：

h2

Angularjs ui modal中的dxSelectBox，选项列表没有显示出来

HTML

app.controller.js

app.service.js

1 个答案: