AngularJS - Wert auf einer Dropdown-Liste zu ng-Modell nicht bindend, wenn keine Änderungen vorgenommen werden

Bitte beachten Sie meine plunkr hierAngularJS - Wert auf einer Dropdown-Liste zu ng-Modell nicht bindend, wenn keine Änderungen vorgenommen werden

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

Ich habe eine aus mit einer Drop-Down-Liste, die wie unten aufgefüllt werden gezeigt :

<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 meinem Controller ich habe eine Funktion einreichen, wie unten dargestellt:

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

Wenn ich nach dem Auswählen eines anderen Werts in der Dropdown-Liste auf die Schaltfläche zum Absenden klicke, kann ich den ausgewählten Wert sehen, aber wenn ich keinen anderen Wert auswähle, wird ng-model = "frmData.defaultProvider" nicht empfangen der Anfangswert.

Wie bekomme ich "frmData.defaultProvider", um mit dem Standardwert zu binden, wenn die Seite geladen wurde?

Quelle

2016-04-15 aliaz

Initialisieren Sie das Modell in der Steuerung:

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

Quelle

2016-04-15 06:44:56 fikkatra

Dieser Code verwenden Sie Ihr Problem leicht lösen können ...

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

 

 
app.controller('DefaultController', ['$scope', function($scope){ 
 
    $scope.welcome = "Hello"; 
 
$scope.frmData={defaultProvider:''}; 
 
$scope.providerlist = [{ 
 
\t "Selected": false, 
 
\t "Text": "Test1", 
 
\t "Value": "9" 
 
}, { 
 
\t "Selected": true, 
 
\t "Text": "Test2", 
 
\t "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>

Quelle

2016-04-15 06:57:43 VjyV

können Sie verwenden ng- init, um den Wert von $ scope.frmData.defaultProvider wie folgt zu initialisieren,

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

Quelle

2016-04-15 07:04:49

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

Sie können versuchen.

Quelle

2016-04-15 08:24:05

http://jsfiddle.net/dCFd2/488/ –

AngularJS - Wert auf einer Dropdown-Liste zu ng-Modell nicht bindend, wenn keine Änderungen vorgenommen werden

Antwort

Verwandte Themen