0

angularjsを使用してMVCシングルページアプリケーション（SPA）を学習しようとしていますが、カスケードドロップダウンリストを実装する方法がわかりません。どんな助けでも大歓迎です。

前もって感謝します、

ナーガ・パネンドラ。

4

2 に答える 2

2

カスケード ドロップダウン リストで Ajax をサポートしたいと考えています。この JSFIDDLE へのリンクには、Ajax と静的リストの両方を使用して DDL をカスケードするための良い例が含まれています。 http://jsfiddle.net/annavester/Zd6uX/

カスケード DDL の Html:

<div ng-controller="AjaxCtrl">
  <h1>AJAX - Oriented</h1>
<div>
    Country: 
    <select id="country" ng-model="country" ng-options="country for country in countries">
      <option value=''>Select</option>
    </select>
</div>
<div>
    City: <select id="city" ng-disabled="!cities" ng-model="city" ng-options="city for city in cities"><option value=''>Select</option></select>
</div>
<div>
    Suburb: <select id="suburb" ng-disabled="!suburbs" ng-model="suburb" ng-options="suburb for suburb in suburbs"><option value=''>Select</option></select>        
</div>

ご覧のとおり、ng-options を使用して DDL にデータを入力します。DDL は $scope で選択されたオブジェクトを返します。そのため、DDL のオプションに表示される id とタイトルの処理方法について心配する必要はありません。

次のコントローラーコードは次のとおりです。

function AjaxCtrl($scope) {
$scope.countries = ['usa', 'canada', 'mexico', 'france'];
$scope.$watch('country', function(newVal) {
    if (newVal) $scope.cities = ['Los Angeles', 'San Francisco'];
});
$scope.$watch('city', function(newVal) {
    if (newVal) $scope.suburbs = ['SOMA', 'Richmond', 'Sunset'];
});
}

ご覧のとおり、$watch を使用して DDL の変更を監視しています。このコード行を置き換えます

if (newVal) $scope.cities = ['Los Angeles', 'San Francisco'];

newVal.ID に基づいてデータを選択し、$http.get を使用して都市に結果を入力する Ajax リクエストを起動するコード

于 2013-10-06T08:40:40.750 に答える
1

ほとんどの場合、この種のメニューは、ある種のネストされた html 構造 (通常は<ul>と<li>タグ) を生成し、スタイルシートと JavaScript を適用して、クリックされるまで子要素を表示または非表示にすることによって実現されます。これにはオンラインで 10 億件の例があるため、この回答では、ネストされた html を生成する方法 (難しい部分) に焦点を当てます。

ng-repeatこれは、インライン テンプレートと一緒に再帰を使用して実現できます。

まず、スコープ内にある種のツリー モデルが必要です。

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

app.controller('MenuController', function($scope) {
    $scope.menu = [
      {
        label : "Main Menu",
        url: "#/main",
        children: [
          { label: "First Child", url: "#/main/1" },
          { label: "Second Child", url: "#/main/2",
            children: [
              { label: "First Grandchild", url: "#/main/2/1" },
              { label: "Second Grandchild", url: "#/main/2/2" }
            ]
          },
          { label: "Third Child", url: "#/main/3",
            children: [
              { label: "Third Grandchild", url: "#/main/3/3" },
              { label: "Fourth Grandchild", url: "#/main/third/fourth",
                children: [
                  { label: "First Great-Grandchild", url: "#/main/3/4/1" },
                  { label: "Second Great-Grandchild", url: "#/main/3/4/2" }
                ]
              }
            ]
          }
        ]
      }
    ];
});

今、あなたの見解では、あなたはすることができます。

<ul ng-controller="MenuController">
  <li ng-repeat="item in menu" ng-include="'menu-tree.html'"></li>
</ul>

<script type="text/ng-template"  id="menu-tree.html">
  <a href="{{item.url}}">{{item.label}}</a>
  <ul>
    <li ng-repeat="item in item.children" ng-include="'menu-tree.html'"></li>
  </ul>
</script>

ここに実際の例へのリンクがあります。http://plnkr.co/edit/V6aVx0JeBFwrUgPZs0vw?p=preview

于 2013-06-24T13:39:53.293 に答える