AngularJS - 上如果正在作出任何更改

請參閱我plunkr這裏下拉列表中未綁定到NG-模型值AngularJS - 上如果正在作出任何更改

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

我有一個從如下圖所示，該被填充的下拉列表：

<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」與加載頁面時的默認值綁定？

來源

2016-04-15 aliaz

初始化控制器型號：

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

來源

2016-04-15 06:44:56 fikkatra

使用此代碼，您可以輕鬆解決你的問題......

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>

來源

2016-04-15 06:57:43 VjyV

您可以使用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>

來源

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>

你可以試試。

來源

2016-04-15 08:24:05

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

AngularJS - 上如果正在作出任何更改

回答

相關問題