簡體   English   中英

我在角度JS中選擇的默認選擇

[英]A default choice in my select in angular JS

我正在使用AngularJS創建一個簡單的應用程序Web。

我想在我的選擇中將城市A的值顯示為默認選項。

的index.html

<body ng-controller="MainCtrl">
  <select ng-model="selectedCity"  ng-change="extractSubsities(selectedCity)" ng-options="item as item.name for item in cities track by item.name">
  </select>

  <select ng-show="selectedCity.subsities" ng-model="selectedSubCity"  ng-change="extractSubsities(selectedSubCity)" ng-options="item2 as item2.name for item2 in selectedCity.subsities track by item2.name">
   <option style="" value=""></option>
   </select>

  <table>
    <tr ng-repeat="item3 in data track by item3.id">
      <td>{{ item3.id }}</td>
      <td>{{ item3.name }}</td>
      <td>{{ item3.price }}</td>
    </tr>
  </table>

</body>

</html>

這是我的腳本js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.cities = [
     {
      name: "city A",
      elements: [{
        id: 'c01',
        name: 'name1',
        price: 15
      }, {
        id: 'c02',
        name: 'name2',
        price: 18
      }, {
        id: 'c03',
        name: 'name3',
        price: 11
      }],
      subsities: [ {
          name: "sub A1",
          elements: [{
            id: 'sub01',
            name: 'nameSub1',
            price: 1
          }, {
            id: 'sub02',
            name: 'nameSub2',
            price: 8
          }, {
            id: 'sub03',
            name: 'nameSub3',
            price: 1
          } ]
        },
         {
          name: "sub A2",
          elements: [{
            id: 'ssub01',
            name: 'nameSsub1',
            price: 1
          }, {
            id: 'ssub02',
            name: 'nameSsub2',
            price: 8
          }, {
            id: 'ssub03',
            name: 'nameSsub3',
            price: 4
          } ]
        },
         {
          name: "sub A3",
          elements: [{
            id: 'sssub01',
            name: 'nameSssub1',
            price: 1
          }, {
            id: 'sssub02',
            name: 'nameSssub2',
            price: 2
          }, {
            id: 'sssub03',
            name: 'nameSssub3',
            price: 1
          }]
        }
      ]
    },
     {
      name: "city B",
      elements: [{
        id: 'cc01',
        name: 'name11',
        price: 10
      }, {
        id: 'cc02',
        name: 'name22',
        price: 14
      }, {
        id: 'cc03',
        name: 'name33',
        price: 11
      } ]
    },
    {
      name: "city C",
      elements: [{
        id: 'ccc01',
        name: 'name111',
        price: 19
      }, {
        id: 'ccc02',
        name: 'name222',
        price: 18
      }, {
        id: 'ccc03',
        name: 'name333',
        price: 10
      } ]
    }
  ];
  $scope.extractSubsities = function(itemSelected) {
    if(itemSelected && itemSelected.elements){
        $scope.data = itemSelected.elements;
    } 
  } 

});

我需要將城市A顯示為默認選擇值我該如何解決這個問題?

您可以在頁面完成加載之前通過將此行添加到控制器來設置所選城市。

像這樣的東西:

$scope.selectedCity = $scope.cities[0].name;

只需將selectedSubCity指定為默認值:

$scope.selectedSubCity = $scope.cities[0];

同時調用extractSubsities:

$scope.extractSubsities();

您可以使用ng-init指令初始化您的選擇。 此外,您還必須調用extractSubsities()函數來填充表格:

 <select ng-model="selectedCity"  ng-change="extractSubsities(selectedCity)" ng-options="item as item.name for item in cities track by item.name" ng-init="selectedCity = cities[0];extractSubsities(selectedCity)">
  </select>

這是一個工作小提琴的例子

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM