如何使用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

回答

相关问题