angularjs如何在下拉列表中填充所选值

Question

I have 2 selected dropdown that is dependent with each other. 我选择了2个相互依赖的下拉菜单。 For example plunker here , I want to populate the value of both dropdown by instead of display "select here" value, I want to display France in first dropdown and One Way in second drop down. 例如，这里的plunker ，我想填充两个下拉列表的值，而不是显示“ select here”值，而是在第一个下拉列表中显示France，在第二个下拉列表中显示One Way。 I tried <option value="selectedPlan">{{selectedPlan}}</option> but it does not show up anything. 我尝试了<option value="selectedPlan">{{selectedPlan}}</option>但是它没有显示任何内容。 Thanks 谢谢

My code: 我的代码：

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>



</head>

<body ng-app="selectExample">
  <script>
    angular.module('selectExample', [])
      .controller('ExampleController', ['$scope', function($scope) {

        $scope.chooseCountries = [{
          name: "France",
        }, {
          name: "Gibraltar",
        }, {
          name: "Malta",
        }];
        $scope.choosePlans = [{
          plan:"One Way"
        }, {
           plan:"Two Way"
        }];

        $scope.selectedCountry = "";
        $scope.selectedPlan = "";
      }]);
  </script>
  <div ng-controller="ExampleController">

    <hr>
    ng-options
    <hr>

    <select ng-model="selectedCountry"
      ng-options="country.name  for country in chooseCountries">
      <option value="">Select here</option>
    </select>

     <select ng-model="selectedPlan" 
      ng-options="plan.plan  for plan in choosePlans">
        <option value="">Select here</option>
    </select>
  </div>
</body>

Answer 1

Assign one of the objects in the options array to the model: 将选项数组中的对象之一分配给模型：

    $scope.selectedCountry = $scope.chooseCountries[0];
    $scope.selectedPlan = $scope.choosePlans[1];

DEMO DEMO

Answer 2

If by "in sync" you mean same index should be selected for second selection, then it would be. 如果“同步”是指应该选择相同的索引进行第二次选择，那么它将是。

<select 
  ng-init="selectedCountry = chooseCountries[0]"
  ng-model="selectedCountry"
  ng-change="selectedPlan = choosePlans[chooseCountries.indexOf(selectedCountry)]"
  ng-options="country.name for country in chooseCountries"> 
</select>
<select 
  ng-model="selectedPlan"
  ng-init="selectedPlan = choosePlans[0]"
  ng-options="plan.plan for plan in choosePlans">
</select>

If it's just about initializing selections, say index 0, just leave out ng-change above and that's it. 如果只是初始化选择，例如索引0，只需在上面省略ng-change 。

angularjs如何在下拉列表中填充所选值

问题描述

2 个解决方案

解决方案1
0 已采纳 2017-02-02 20:03:11

解决方案2
0 2017-02-02 20:22:59

angularjs如何在下拉列表中填充所选值

问题描述

2 个解决方案

解决方案1 0 已采纳 2017-02-02 20:03:11

解决方案2 0 2017-02-02 20:22:59

解决方案1
0 已采纳 2017-02-02 20:03:11

解决方案2
0 2017-02-02 20:22:59