AngularJS - Value on a dropdown list not binding to ng-model if no changes are being made

Question

Please see my plunkr here

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

I have a from with a dropdown list that gets populated as shown below:

<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>

in my controller i have a submit function as shown below:

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

When I click the submit button after selecting a different value in the dropdown list, I am able to see the selectedvalue, but if I don't select a different value, the ng-model="frmData.defaultProvider" is not getting the initial value.

How can i get "frmData.defaultProvider" to bind with the default value when the page was loaded?

score 0 · Answer 1 · answered Apr 15 '16 at 06:44

0

Initialize the model in the controller:

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

answered Apr 15 '16 at 06:44

fikkatra

5,605
4
40
66

score 0 · Answer 2 · answered Apr 15 '16 at 06:57

Using This code You can solve your problem easily ...

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>

score 0 · Answer 3 · answered Apr 15 '16 at 07:04

You can use ng-init to initialize the value of $scope.frmData.defaultProvider as follows,

<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>

score 0 · Answer 4 · answered Apr 15 '16 at 08:24

$scope.filterCondition = {
        operator: 'neq'
    }

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

<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>

You can try.

AngularJS - Value on a dropdown list not binding to ng-model if no changes are being made

4 Answers4