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

标签 angularjs

请引用下面的 fiddle 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>

最佳答案

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

关于angularjs - 如何使用angularjs设置下拉默认值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35743472/

相关文章:

angularjs,为指令创建过滤器

html - 带有另一个表的表列

javascript - 如何调试 ng-pattern

javascript - Angular js - 格式化日期时间以匹配条件

angularjs - Angular 1.2 不再允许在同一元素上使用多个隔离范围指令?

javascript - 使用 ng-init 将数据从 ng-repeat 发送到另一个 Controller

javascript - Angularjs 模型仅在 View 中更改,而不在 Controller 中更改

javascript - 使用 ng-click 过滤博客文章

AngularJS - 有没有一种简单的方法可以在 "sibling"范围上设置变量?

hibernate - 如何使用 jackson 模块 hibernate 序列化延迟加载的实体?