无法在点击事件的选择中设置第二个下拉列表的选定值在angularJs中

Question

我在代码中有两个DropDown。我使用Option上的data-ng-options绑定其值。我想根据第一个选择设置第二个下拉列表的选定值。

这是我的代码。

<select data-ng-options="o.name for o in options track by o.id" data-ng-model="selectedOption" class="selectpicker" data-style="btn-default" ng-change="onselectClick()">                                                   </select>
<!-- Second dropdown -->
<select data-ng-options="o.name for o in secondoptions track by o.id" data-ng-model="selectedSecondOption" class="selectpicker" data-style="btn-default">
</select>

的js

 $scope.options = [
     {"id" : "Please Select","name" : "Please Select"}, 
     {"id" : "1","name" : "1"}, 
     {"id" : "2","name" : "2"}, 
     {"id" : "3","name" : "3"}, 
     {"id" : "4","name" : "4"}];
    $scope.secondoptions = [
     {"id" : "Please Select","name" : "Please Select"}, 
     {"id" : "1","name" : "1"}, 
     {"id" : "2","name" : "2"}, 
     {"id" : "3","name" : "3"}, 
     {"id" : "4","name" : "4"}];
    $scope.selectedOption = $scope.options [0];
    $scope.selectedSecondOption = $scope.secondoptions [0];

    $scope.onselectClick = function() {
    $scope.selectedSecondOption = $scope.secondoptions[3];
    }

我已经提到了以下网址：

1. Unable to set selected value in angularjs dropdown

2. http://jsfiddle.net/dCFd2/

如果有人知道解决方案，请帮助我。

感谢。

Answer 1

你需要得到这样的东西吗？

＆＃13;

＆＃13;

var app = angular.module("App", [])
app.controller('AppCtrl', AppCtrl);

function AppCtrl($scope){
   $scope.options = [
     {"id" : "0","name" : "Please Select"}, 
     {"id" : "1","name" : "1"}, 
     {"id" : "2","name" : "2"}, 
     {"id" : "3","name" : "3"}, 
     {"id" : "4","name" : "4"}
  ];
  $scope.secondoptions = [
    {"id" : "0","name" : "Please Select"}, 
    {"id" : "1","name" : "1"}, 
    {"id" : "2","name" : "2"}, 
    {"id" : "3","name" : "3"}, 
    {"id" : "4","name" : "4"}
  ];
    $scope.selectedOption = $scope.options[0];
    $scope.selectedSecondOption = $scope.secondoptions[0];

    $scope.onselectClick = function() {
    	$scope.selectedSecondOption = $scope.secondoptions[$scope.selectedOption.id];
    }
};

＆＃13;

<script src="https://code.angularjs.org/1.5.8/angular.js"></script>
<div ng-app="App">
  <div ng-controller="AppCtrl">
  <select data-ng-options="o.name for o in options track by o.id" data-ng-model="selectedOption" class="selectpicker" data-style="btn-default" ng-change="onselectClick()">                             </select>
  <!-- Second dropdown -->
  <select data-ng-options="o.name for o in secondoptions track by o.id" data-ng-model="selectedSecondOption" class="selectpicker" data-style="btn-default">
  </select>
</div> 
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这只是因为 Bootstrap UI。以下代码对我有用。

<select data-ng-options="o.name for o in secondoptions track by o.id" data-ng-model="selectedSecondOption" class="selectpicker secondselect" data-style="btn-default"> </select>  

$('.secondselect').selectpicker('val',"3");