将第一个值设置为deafult选择框值

时间:2016-04-17 06:22:40

标签: angularjs

html代码设置默认下拉值。必须将列表中的第一个值设置为默认选定值。

<div class="col-md-12" ng-controller="TestController as regCtrl" >
 <div ng-init="regCtrl.getMasterData()" >
<select ng-model="regCtrl.user.screeningType.screeningTypeId" ng-change="regCtrl.getType(regCtrl.user.screeningType.screeningTypeId)"
                                 ng-options="sctype.screeningTypeId as sctype.screeningType for sctype in regCtrl.screeningTypeList track by sctype.screeningTypeId"
                                 class="form-control field-size ng-pristine ng-invalid ng-invalid-required ng-valid-maxlength ng-touched" name="screeningType"
                                 id="screeningType" required >
</div>
</div>      

下面是我可以设置值的控制器。

(function () {
    'use strict';
    angular.module('app.controllers')
        .controller("TestController",  TestController);

    TestController.$inject = ['$http','LookupService','$filter', '$timeout', 'SweetAlertService', 'Constants'];
    function TestController($http,LookupService,$filter, $timeout, SweetAlertService, Constants){
        var vm = this;

                      vm.getMasterData = function(){             
                                     $http({
                method: 'GET',
                url: 'master/getAllScreeningTypeMast'
            }).success(function(response){
                vm.screeningTypeList=response.result; 

            }).error(function(resp){

            });

            vm.user.screeningType.screeningTypeId = vm.user.screeningType.screeningTypeId[0].screeningTypeId; // getting undefined 
            }
})();

这是来自服务器的响应

/**
                        [{
        "screeningTypeId": 2,
        "screeningType": "Employment",
        "activeYn": null,
        "mmpidRequiredYn": "Y"
    }, {
        "screeningTypeId": 3,
        "screeningType": "Female Marriage",
        "activeYn": null,
        "mmpidRequiredYn": "N"
    }, {
        "screeningTypeId": 4,
        "screeningType": "Food",
        "activeYn": null,
        "mmpidRequiredYn": null
    }, {
        "screeningTypeId": 1,
        "screeningType": "Male Marriage",
        "activeYn": null,
        "mmpidRequiredYn": "Y"
    }]

                */

尝试过ng-int,ng-selected什么都没有用。

3 个答案:

答案 0 :(得分:1)

试试这个并写入.success函数

vm.user.screeningType.screeningTypeId = response.result [0];

这样可以在ng-option中存储整个对象。 :)  我写了一个与你的相关的快速代码:

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="app">
  <div class="col-md-12" ng-controller="TestController" >
  <select ng-model="screeningTypeIdData" ng-options="op.screeningType for op in screeningTypeList track by op.screeningTypeId">

  </select>
  </div>

  </body>

</html>

和.js文件

//代码在这里

var app = angular.module('app',[]);

app.controller("TestController",['$scope','$http','$filter', '$timeout',function($scope,$http,$filter, $timeout)
{



    $scope.screeningTypeList =  [{
        "screeningTypeId": 2,
        "screeningType": "Employment",
        "activeYn": null,
        "mmpidRequiredYn": "Y"
    }, {
        "screeningTypeId": 3,
        "screeningType": "Female Marriage",
        "activeYn": null,
        "mmpidRequiredYn": "N"
    }, {
        "screeningTypeId": 4,
        "screeningType": "Food",
        "activeYn": null,
        "mmpidRequiredYn": null
    }, {
        "screeningTypeId": 1,
        "screeningType": "Male Marriage",
        "activeYn": null,
        "mmpidRequiredYn": "Y"
    }];

$scope.screeningTypeIdData  = $scope.screeningTypeList[0];
   // alert($scope.screeningTypeList[0].screeningTypeId);
  //alert($scope.screeningTypeIdData ) 

}]);

答案 1 :(得分:1)

您是否使用了错误的变量来设置默认值?而不是:

vm.user.screeningType.screeningTypeId = vm.user.screeningType.screeningTypeId[0];

它应该是:

vm.user.screeningType.screeningTypeId = vm.screeningTypeList[0];

vm.screeningTypeList是包含结果的数组。而不是将变量设置为id,而应将其设置为整个对象

此处存在类似问题:angular ng-options with preselected value by object id

这是由track by中的ng-options引起的。

答案 2 :(得分:0)

vm.user.screeningType.screeningTypeId = vm.user.screeningType.screeningTypeId[0].screeningTypeId;

在.success函数中使用上面的代码而不是在它之外。

相关问题