AngularJS — значение в раскрывающемся списке не привязывается к ng-модели, если не вносятся изменения

Пожалуйста, посмотрите мой 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="frmData.defaultProvider" не получает начальный ценность.

Как я могу заставить «frmData.defaultProvider» связываться со значением по умолчанию при загрузке страницы?


angularjs angular-ngmodel angularjs-select
person aliaz    schedule 15.04.2016    source источник

Ответы (4)


arrow_upward
0
arrow_downward

Инициализируйте модель в контроллере:

$scope.providerlist = ...
$scope.frmData = {defaultProvider: $scope.providerlist[1]};
person fikkatra    schedule 15.04.2016

arrow_upward
0
arrow_downward

Используя этот код, вы можете легко решить свою проблему ...

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="[email protected]" 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>

person VjyV    schedule 15.04.2016

arrow_upward
0
arrow_downward

Вы можете использовать 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>
person NOBLE M.O.    schedule 15.04.2016

arrow_upward
0
arrow_downward 

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

Можешь попробовать.

person barış çıracı    schedule 15.04.2016