如何使用angularjs设置下拉默认值答案

【问题标题】：how to set dropdown default value using angularjs如何使用angularjs设置下拉默认值
【发布时间】：2016-03-02 09:43:06
【问题描述】：

请参考下面的小提琴 http://jsfiddle.net/nq1eyj1v/117/

任何人都可以帮助如何将默认选项值设置为“选择” 加载时选择？

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>

【问题讨论】：

$scope.payment = { type : 'Cash' } 这将为您提供现金作为默认选择值。
在您的控制器中 - $scope.payment.type = 'Default';
如果我在我的控制器上设置，默认值正在加载，但我的选择选项更改不起作用。这是选项 ng-if 内容未加载的更改。有什么线索吗？
把你这一行的改成这个 :p

标签： angularjs

【解决方案1】：

我已经更新了你的 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>

JS

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.payment.type 值初始化为'Select'，并为其分配了第一个$scope.options 值。

【讨论】：

很好，但是我们如何在不同值的变化上显示不同的容器？默认情况下，您更新的小提琴选择是通过显示不同 div 内容的 on change 无法正常工作...！！

【解决方案2】：

很容易。只需在选项内添加空值。

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

}

小提琴：http://jsfiddle.net/nq1eyj1v/121/

【讨论】：

为此最好使用 angular ng-options。
我只使用 ng-options 但如何检查我的 div 上“ng-if”中的选项值以显示或隐藏？
如果您对某个答案感到满意，别忘了点赞，并选择它作为答案。

【解决方案3】：

function MyCtrl($scope) {

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

 }

通过这个修改你的js代码

【讨论】：

【解决方案4】：

您必须在控制器中将 payment.type 设置为 "Default"。

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

【讨论】：

如果我在我的控制器上设置，默认值正在加载，但我的选择选项更改不起作用。这是选项 ng-if 内容未加载的更改。有什么线索吗？
我已经更新了你的 Fiddle 并且它可以工作：jsfiddle.net/nq1eyj1v/124 你没有使用正确的语法来声明你的控制器。

【解决方案5】：

改变你的

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

到

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

【讨论】：

【解决方案6】：

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>

【讨论】：

【解决方案7】：

Following code set the default value of dropdown

In Html:
<select name="type" ng-model="payment.type" ng-dropdown required >
    <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>


In angular controller:

$scope.payment.type = 'Default';

【讨论】：