在Angular下拉列表中选择项目

时间:2017-10-25 14:33:32

标签: angularjs

我有一个使用mvc和angular编写的Web应用程序。我有一个问题,当加载一个记录时,选择不会选择任何值。我的文本框和复选框都可以正常工作,但我的选择却没有。我的选择的HTML是

<div class="row">
     <div class="col-md-4">
          Project Type
     </div>
     <div class="col-md-4">
           <select ng-options="ProductType.Value for ProductType in ProductTypes track by ProductType.Id"
               class="form-control" ng-model="Dissemination.ProductType"></select>        
     </div>
</div>

下拉列表会在页面加载时加载。

angular.module('DisseminationApp').controller('DisseminationProjectInfoController', function ($scope, $http, validationMethods, dataService, ProjectServiceFactory) {
    $scope.ShowProject = false;
    $scope.ProductTypes = dataService.getProductTypes();
});

该服务只是返回选择的硬编码值。

function getProductTypes() {
        var values = [];
        values.push({ Id: '52146595-0DC6-4A81-9C18-0482C817F724', Value: 'Option 1'});
        values.push({ Id: 'F61D261E-895E-4039-A125-C29972673623', Value: 'Option 2'});
        return values;
    };

然后我有一个项目点击事件。

 <div class="row" ng-repeat="dissemination in Disseminations|orderBy:sort.column:sort.descending">
            <div class="col-md-2" ng-click="OpenRecord(dissemination)">
                link
            </div>
            <div class="col-md-3">
                {{dissemination.TypeString}}
            </div>
            <div class="col-md-3">
                {{dissemination.Title}}
            </div>
            <div class="col-md-3">
                {{dissemination.CreateDateString}}
            </div>
        </div>

在此点击事件中,我打开对话框并将范围值设置为新的传播。除了下拉值之外,一切都有效。

$scope.OpenRecord = function (newValue) {
        if (newValue != undefined) {
            $("#DisseminationId").modal('show');
            alert(newValue.ProductType.toUpperCase() == '52146595-0DC6-4A81-9C18-0482C817F724');
            $scope.Dissemination = newValue;
            $scope.Dissemination.ProductType = $scope.Dissemination.ProductType.toUpperCase();
            alert($scope.Dissemination.ProductType);
        }
    });

第一个警报返回true,第二个警报设置为正确值。问题示例在https://plnkr.co/edit/vDC0uu6MD3h6r3Woruo9?p=streamer

0 个答案:

没有答案