根据单选按钮更改设置默认下拉列表值

时间:2018-03-13 08:26:25

标签: javascript jquery html angularjs

如果单选按钮已更改,我想在下拉列表中设置默认值,我想在下拉列表中显示该值。

1)如果我选择单选按钮为“否”,我想在下拉列表中显示“第四”。否则如果是“是”则不需要任何条件,这是默认值。

2)我想在下拉列表中发送“第四”文本,一旦我选择单选按钮为“否”。

实施例,

jsfiddle

'use strict';

var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {
  $scope.mail_notifications = [{
      "key": "all",
      "value": "First"
    },
    {
      "key": "selected",
      "value": "Second"
    },
    {
      "key": "only_my_events",
      "value": "Third"
    },
    {
      "key": "only_assigned",
      "value": "Fourth"
    },
    {
      "key": "only_owner",
      "value": "Fifth"
    },
  ];
  $scope.mail_notification = 'all';

});
<form id="myForm">
  <input type="radio" name="myRadio" value="Yes" /> Yes <br />
  <input type="radio" name="myRadio" value="No" /> No <br />
</form>


<div ng-app="myApp">
  <div ng-controller="AppCtrl">
    {{message}} <br />

    <!--Options value is defualt 0, 1 ... and it's non change able -->
    <span>Default Otions:</span>
    <select ng-model="mail_notification" ng-options="c.key as c.value for c in mail_notifications"></select>
    <br />


  </div>
</div>

对我而言,下拉列表显示为空。任何人都可以告诉我该怎么做?

1 个答案:

答案 0 :(得分:2)

您可以为单选按钮指定ng-click事件。但为此你必须在控制器内写下你的表格标签。

Fiddle

'use strict';

var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope){
    $scope.mail_notifications = [
        {
            "key": "all",
            "value": "First"
        },
        {
            "key": "selected",
            "value": "Second"
        },
        {
            "key": "only_my_events",
            "value": "Third"
        },
        {
            "key": "only_assigned",
            "value": "Fourth"
        },
        {
            "key": "only_owner",
            "value": "Fifth"
        },
    ];
    $scope.mail_notification = 'all';
   
   $scope.radioSelection=function(val){
   	    if(val==2){
           $scope.mail_notification='only_assigned';
        }
        if(val==1){
           $scope.mail_notification='all';
        }
   }
   
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="myApp">
    <div ng-controller="AppCtrl">
        {{message}} <br />
        <form id="myForm">
<input type="radio" name="myRadio" value="1" ng-click="radioSelection(1)"/> 1 <br />
<input type="radio" name="myRadio" value="2" ng-click="radioSelection(2)"/> 2 <br />
</form>
        <!--Options value is defualt 0, 1 ... and it's non change able -->
        <span>Default Otions:</span>
        <select ng-model="mail_notification" ng-options="c.key as c.value for c in mail_notifications"></select>
        <br />
        
                     
    </div>
</div>