默认值不是使用ng-init设置select

时间:2017-06-29 18:49:38

标签: angularjs

我无法使用ng-options设置下拉列表的默认值,我可以在响应中获取默认值,但是在下拉菜单中没有设置。

在js

 $scope.personalDetails = [
            {
               'fname':'Muhammed',
                'lname':'Shanid',
                'email':'shanid@shanid.com',
                'check' : 'Y',
                'checkxDrpn' : [
                  { key: 'Y',selectVal: "Yes"},
                  { key: 'N',selectVal: "No"}
                ]
            },
            {
                'fname':'John',
                'lname':'Abraham',
                'email':'john@gmail.com',
                'check' : 'N',
                'checkxDrpn' : [
                  { key: 'Y',selectVal: "Yes"},
                  { key: 'N',selectVal: "No"}
                ]
            },
            {
                'fname':'raj',
                'lname':'komali',
                'email':'raj@gmail.com',
                'check' : 'N',
                 'checkxDrpn' : [
                  { key: 'Y',selectVal: "Yes"},
                  { key: 'N',selectVal: "No"}
                ]
            },
            {
                'fname':'Roy',
                'lname':'Mathew',
                'email':'roy@roy.com',
                'check' : 'N',
                 'checkxDrpn' : [
                  { key: 'Y',selectVal: "Yes"},
                  { key: 'N',selectVal: "No"}
                ]
            }];

in html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>

<table class="table table-striped table-bordered">                                    
  <tbody>
    <tr ng-repeat="personalDetail in personalDetails">
      <td>
        <select ng-model="personalDetail.selectedDpn" ng-init="personalDetail.selectedDpn = personalDetail.checkxDrpn[1].key" ng-options="option.selectVal for option in personalDetail.checkxDrpn track by option.key" value="personalDetail.checkxDrpn[1].key"></select>           
          default value : {{personalDetail.checkxDrpn[1].key}}
      </td>
    </tr>
  </tbody>
</table>

1 个答案:

答案 0 :(得分:1)

您需要将模型变量设置为对象

 ng-init="personalDetail.selectedDpn= personalDetail.checkxDrpn[1]"

<强>样本

&#13;
&#13;
var app = angular.module('demo', []);
app.controller("profileController", function($scope) {
 $scope.personalDetails = [
            {
               'fname':'Muhammed',
                'lname':'Shanid',
                'email':'shanid@shanid.com',
                'check' : 'Y',
                'checkxDrpn' : [
                  { key: 'Y',selectVal: "Yes"},
                  { key: 'N',selectVal: "No"}
                ]
            },
            {
                'fname':'John',
                'lname':'Abraham',
                'email':'john@gmail.com',
                'check' : 'N',
                'checkxDrpn' : [
                  { key: 'Y',selectVal: "Yes"},
                  { key: 'N',selectVal: "No"}
                ]
            },
            {
                'fname':'raj',
                'lname':'komali',
                'email':'raj@gmail.com',
                'check' : 'N',
                 'checkxDrpn' : [
                  { key: 'Y',selectVal: "Yes"},
                  { key: 'N',selectVal: "No"}
                ]
            },
            {
                'fname':'Roy',
                'lname':'Mathew',
                'email':'roy@roy.com',
                'check' : 'N',
                 'checkxDrpn' : [
                  { key: 'Y',selectVal: "Yes"},
                  { key: 'N',selectVal: "No"}
                ]
            }];
   
});
&#13;
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
 <script src="script.js"></script>
</head>
<body ng-app="demo" ng-controller="profileController">
<table class="table table-striped table-bordered">
                                  
      <tbody>
        <tr ng-repeat="personalDetail in personalDetails">
          <td>
             <select  ng-init="personalDetail.selectedDpn= personalDetail.checkxDrpn[1]" ng-options="value as value.selectVal for value in personalDetail.checkxDrpn track by value.key"
        ng-model="personalDetail.selectedDpn" ></select>
       
default value : {{personalDetail.checkxDrpn[1].selectVal}}
          </td>
        </tr>
      </tbody>
      </table>
 
</body>
</html>
&#13;
&#13;
&#13;