如何使用angularjs

設置下拉列表默認值

請參考下面的小提琴 http://jsfiddle.net/nq1eyj1v/117/如何使用angularjs

任何一個可以幫助如何設置默認選項值作爲負載「選擇」選擇？

HTML：

<div ng-app="myApp" ng-controller="MyCtrl"> 
    <div class="col-xs-12"> 
     <label class="col-xs-6 control-label">Type:</label> 
     <div class="col-xs-6"> 
     <select name="type" ng-model="payment.type" ng-dropdown required ng-change="changeme()" > 
      <option ng-option value="Default">Select</option> 
      <option ng-option value="Cash">Cash</option> 
      <option ng-option value="Check">Check</option> 
      <option ng-option value="Money Order">Money Order</option> 
     </select> 
     </div> 
    </div> 

    <div class="col-xs-12" ng-if="payment.type == 'Cash'"> 
    11111111111111 
    </div> 

    <div class="col-xs-12" ng-if="payment.type == 'Check'"> 
    22222222222 
    </div> 

    <div class="col-xs-12" ng-if="payment.type == 'Money Order'"> 
    3333333333333 
    </div> 

</div>

來源

2016-03-02 Krish

'$ scope.payment = {type：'現金'}'這會讓您將現金作爲默認選定值。 –

在你的控制器 - '$ scope.payment.type ='默認';' – Vineet

如果我在我的控制器上設置，默認值正在加載，但我的選擇選項更改不起作用。即在選項ng上發生更改 - 如果內容未加載。任何線索？ – Krish

我已經更新您的jsfiddle here.

我使用ng-options取代options。

HTML

<div ng-app="myApp" ng-controller="MyCtrl"> 
    <div class="col-xs-12"> 
     <label class="col-xs-6 control-label">Type:</label> 
      <div class="col-xs-6"> 
       <select name="type" ng-model="payment" ng-dropdown required ng-change="changeme()" ng-options="option.type for option in options"> 
       </select> 
      </div> 
     </div> 

     <div class="col-xs-12" ng-if="payment.type == 'Cash'"> 
11111111111111 
     </div> 

     <div class="col-xs-12" ng-if="payment.type == 'Check'"> 
22222222222 
     </div> 

     <div class="col-xs-12" ng-if="payment.type == 'Money Order'"> 
3333333333333 
     </div> 
    </div> 
</div>

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

function MyCtrl($scope) { 
    $scope.options = [ 
     { type: 'Select' }, 
     { type: 'Cash' }, 
     { type: 'Check' }, 
     { type: 'Money Order' } 
    ]; 

    $scope.payment = $scope.options[0]; 
}

正如你所看到的，我通過給它的第$scope.options值初始化$scope.payment.type值'Select'。

來源

2016-03-02 09:54:45 Erazihel

不錯，但是如何才能在不同價值的變化上展示不同的容器？您更新默認選擇的小提琴正在通過更改顯示不同的div內容不工作...！ – Krish

非常容易。只需在選項內添加空值。

<option value="">Select</option>

最後：

<select name="type" ng-model="payment.type" ng-dropdown required ng-change="changeme()" > 
      <option ng-option value="">Select</option> 
      <option ng-option value="Cash">Cash</option> 
      <option ng-option value="Check">Check</option> 
      <option ng-option value="Money Order">Money Order</option> 
     </select>

更新小提琴：http://jsfiddle.net/nq1eyj1v/118/

編輯1：

<div ng-app="myApp" ng-controller="MyCtrl"> 
    <div class="col-xs-12"> 
     <label class="col-xs-6 control-label">Type:</label> 
     <div class="col-xs-6"> 
     <select name="type" ng-model="payment" ng-dropdown required ng-change="changeme(payment)" ng-options="option.name for option in options"> 
       <option ng-option value="">Select</option> 
     </select> 
     </div> 
    </div> 

    <div class="col-xs-12" ng-if="payment.name == 'Cash'"> 
    11111111111111 
    </div> 

    <div class="col-xs-12" ng-if="payment.name == 'Check'"> 
    22222222222 
    </div> 

    <div class="col-xs-12" ng-if="payment.name == 'Money Order'"> 
    3333333333333 
    </div> 

</div>

JS：

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


function MyCtrl($scope) { 
    $scope.options = [ 
     { name: 'Cash' }, 
     { name: 'Check' }, 
     { name: 'Money Order' } 
    ]; 

    $scope.changeme = function (payment) { 
     alert(payment.name) 
    } 

}

FIDDLE：http://jsfiddle.net/nq1eyj1v/121/

來源

2016-03-02 09:47:23 Ved

感謝 - 它的工作原理:) – Krish

樂意提供幫助。 :) – Ved

頂部，如果我想默認顯示「現金」？ – Krish

你必須設置payment.type到"Default"在控制器中。

myApp.controller('MyCtrl', function($scope, ...) { 
    $scope.payment = ...; 
    $scope.payment.type = "Default"; 
    ... 
}

來源

2016-03-02 09:47:49 Silverspur

如果我在我的控制器上設置，默認值正在加載，但我的選擇選項更改不起作用。即在選項ng上發生更改 - 如果內容未加載。任何線索？ – Krish

我已經更新了你的小提琴，它的工作原理如下：http://jsfiddle.net/nq1eyj1v/124/ 你沒有使用正確的語法來聲明你的控制器。 – Silverspur

function MyCtrl($scope) { 

$scope.payment.type="Default"; 
// payment.type = 'Check' ; 
// $scope.changeme = function() { 
// alert('here'); 

}

本

來源

2016-03-02 10:10:28

修改您的js代碼只是改變你的

<option ng-option value="Default">Select</option>

到

<option ng-option value="">Select</option>

來源

2016-03-02 10:31:19

var app = angular.module('MyApp', []) 
 
     app.controller('MyController', function ($scope) { 
 
      $scope.payments= [{ 
 
       Id: 0, 
 
       Name: 'Select' 
 
      }, { 
 
       Id: 1, 
 
       Name: 'Cash' 
 
      },{ 
 
       Id: 2, 
 
       Name: 'Check' 
 
      },{ 
 
       Id: 3, 
 
       Name: 'Money Order' 
 
      }]; 
 
     });

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script> 
 
<div ng-app="MyApp"> 
 
<div ng-controller="MyController"> 
 

 
<h2>Using ng-selected with payment id</h2><br> 
 
    <select ng-model="drp"> 
 
     <option ng-repeat="payment in payments" value="{{payment.Id}}" 
 
       ng-selected="{{ payment.Id== 0}}"> 
 
      {{payment.Name}} 
 
     </option> 
 
    </select> 
 
    <br> 
 
    <h2> Using ng-selected with payment Name</h2><br> 
 
    <select ng-model="drp"> 
 
     <option ng-repeat="payment in payments" value="{{payment.Id}}" 
 
       ng-selected="{{ payment.Name== 'Cash'}}"> 
 
      {{payment.Name}} 
 
     </option> 
 
    </select> 
 
</div> 
 
</div>

來源

2018-02-23 05:35:36

如何使用angularjs

回答

相關問題