Question

请在此处查看我的plunkr

https://plnkr.co/edit/QRQQmxf3ZDyh6o0CqtrD?p=preview

我有一个带有下拉列表的from，如下所示：

<form name="frmAccount" role="form" ng-submit="submit()">

    <div class="row">
                        <div class="col-md-6 col-md-offset-3">
                            <div class="form-group">
                                <label for="defaultProvider">My Default Provider</label>
                                <select class="form-control"  ng-model="frmData.defaultProvider">
                                    <option ng-selected="{{row.Selected}}" ng-repeat="row in providerlist" value="{{row}}" name="defaultProvider" >{{row.Text}} </option>
                                </select>
                            </div>
                        </div>
                    </div>

    <div class="col-md-6 col-md-offset-3">
        <button class="btn btn-group-lg btn-primary pull-right" type="submit" >Submit</button>
    </div>
    </form>

在我的控制器中我有一个提交功能，如下所示：

 $scope.submit= function(){
    $scope.selectedValue = $scope.frmData.defaultProvider;
  }

当我在下拉列表中选择不同的值后单击提交按钮时，我能够看到所选的值，但如果我没有选择其他值，则ng-model =＆＃34; frmData .defaultProvider＆＃34;没有得到初始值。

我怎样才能获得＆＃34; frmData.defaultProvider＆＃34;在页面加载时绑定默认值？

Answer 1

在控制器中初始化模型：

$scope.providerlist = ...
$scope.frmData = {defaultProvider: $scope.providerlist[1]};

Answer 2

使用此代码您可以轻松解决问题...

var app = angular.module('app', ['ngRoute']);


app.controller('DefaultController', ['$scope', function($scope){
  $scope.welcome = "Hello";  
 $scope.frmData={defaultProvider:''};
$scope.providerlist = [{
	"Selected": false,
	"Text": "Test1",
	"Value": "9"
}, {
	"Selected": true,
	"Text": "Test2",
	"Value": "8"
}];
 $scope.frmData.defaultProvider = $scope.providerlist[1];
  $scope.submit= function(){
    $scope.selectedValue = $scope.frmData.defaultProvider;
  }
  
  
 
  
}]);

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="DefaultController">
    <h1>{{welcome}}</h1>
    {{preferencesMenu}}
    
    <form name="frmAccount" role="form" ng-submit="submit()">
   
    <div class="row">
                        <div class="col-md-6 col-md-offset-3">
                            <div class="form-group">
                                <label for="defaultProvider">My Default Provider</label>
                                <select class="form-control"  data-ng-model="frmData.defaultProvider">
                                    <option ng-selected="{{row.Selected}}" ng-repeat="row in providerlist" value="{{row}}" name="defaultProvider" >{{row.Text}} </option>
                                </select>
                            </div>
                        </div>
                    </div>
    
    <div class="col-md-6 col-md-offset-3">
        <button class="btn btn-group-lg btn-primary pull-right" type="submit" >Submit</button>
    </div>
    </form>
    
    <div>
      Value Selected: {{frmData.defaultProvider}}
    </div>
  </body>
</html>

Answer 3

您可以使用ng-init初始化$ scope.frmData.defaultProvider的值，如下所示，

<select class="form-control"  ng-model="frmData.defaultProvider" ng-init="frmData.defaultProvider = providerlist[1]">
                                <option ng-selected="{{row.Selected}}" ng-repeat="row in providerlist" value="{{row}}" name="defaultProvider" >{{row.Text}} </option>
                            </select>

Answer 4

＆＃13;

$scope.filterCondition = {
        operator: 'neq'
    }

    $scope.operators = [{
        value: 'eq',
        displayName: 'equals'
    }, {
        value: 'neq',
        displayName: 'not equal'
    }]
    
    $scope.myButtonFunction=function (){
    $scope.value = $scope.filterCondition.operator;
}

＆＃13;

<div>Operator is: {{filterCondition.operator}}</div>
    <div class="row">
        <select ng-model="filterCondition.operator">
            <option ng-selected="{{operator.value == filterCondition.operator}}"
                    ng-repeat="operator in operators" 
                    value="{{operator.value}}">{{operator.displayName}}</option>
        </select>
</div>
<div class="row">
   <button ng-click="myButtonFunction()">
         myButton
   </button>
</div>
<div class="row">
    value:{{value}}
</div>

＆＃13;

你可以试试。

AngularJS - 如果未进行任何更改，则下拉列表中的值不会绑定到ng-model

4 个答案: