Question

我有下拉列表，如下所示。所有这些工作。我只需要为每个设置默认值。我知道如何在上层做，但如何在下一层做？这是我的HTML代码：

 <html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>

    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.20/angular.js" data-semver="1.2.20"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div class="row">
         <div class="col-md-4 col-xs-4 col-sm-4">
          <select required ng-change="onBookChange(books,book)" ng-model="book" ng-options="bb.bookName for bb in books" class="form-control" >
            <option value="">--Select--</option>
         </select>  
        </div>
        <div class="col-md-4 col-xs-4 col-sm-4">
         <select required ng-model="chapter" ng-change="onChapterChange(books,chapter)" ng-options="cha.chapterName for cha in books.selectedChapters" class="form-control" >
            <option value="">--Select--</option>
         </select>   
        </div>
        <div class="col-md-4 col-xs-4 col-sm-4">
         <select required ng-model="title" ng-change="onTitleChange(books,title)" ng-options="t for t in books.selectedTitles" class="form-control" >
            <option value="">--Select--</option>
         </select>   
        </div>
      </div>
  </body>

</html>

这是我的javascript代码：

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

app.controller('MainCtrl', function($scope) {


  $scope.books=[

    { 
      id:1,
      bookName:'C++',
      chapter:[
                {chapterName:'Introduction',titles:['About Author','C++ Basic']},
                {chapterName:'OOPS basic',titles:['Class','Object','Data Encapsulation','Inheritance','Interface']},

              ]
    },
     { 
      id:2,
      bookName:'Java',
      chapter:[
                {chapterName:'Java Introduction',titles:['About Author','Java Intro']},
                {chapterName:'Java basic',titles:['Variables','Function','Function Overloading','Class','Object']},

              ]

    },
     { 
      id:3,
      bookName:'Angular JS',
      chapter:[
                {chapterName:'Introduction',titles:['MVC','Model','View','Controller']},
                {chapterName:'Key Features',titles:['Template','Scope','Expressions','Filter','Controller','Module']},

              ]
    }

  ];


  $scope.onBookChange=function(b,book){
    //alert("inside");
    b.selectedChapters=book.chapter;
  }

  $scope.onChapterChange=function(b,cha){
    //alert("inside");
   // console.log(cha);
    b.selectedChapter=cha;
    b.selectedTitles=cha.titles;

  }
  $scope.onTitleChange=function(b,t){
   // alert(t);
    b.selectedTitle=t;  

  }


});

Answer 1

请参阅下面的演示

＆＃13;

var app = angular.module('app', ['ui.bootstrap']);

app.controller('homeCtrl', function($scope) {

  $scope.books = [

    {
      id: 1,
      bookName: 'C++',
      chapter: [{
          chapterName: 'Introduction',
          titles: ['About Author', 'C++ Basic']
        }, {
          chapterName: 'OOPS basic',
          titles: ['Class', 'Object', 'Data Encapsulation', 'Inheritance', 'Interface']
        },

      ]
    }, {
      id: 2,
      bookName: 'Java',
      chapter: [{
          chapterName: 'Java Introduction',
          titles: ['About Author', 'Java Intro']
        }, {
          chapterName: 'Java basic',
          titles: ['Variables', 'Function', 'Function Overloading', 'Class', 'Object']
        },

      ]

    }, {
      id: 3,
      bookName: 'Angular JS',
      chapter: [{
          chapterName: 'Introduction',
          titles: ['MVC', 'Model', 'View', 'Controller']
        }, {
          chapterName: 'Key Features',
          titles: ['Template', 'Scope', 'Expressions', 'Filter', 'Controller', 'Module']
        },

      ]
    }

  ];


  $scope.onBookChange = function(b, book) {

    //set default chapter
    $scope.chapter = book.chapter[0];
    //set default title
    $scope.title = $scope.chapter.titles[0];
  }

  $scope.onChapterChange = function(b, chapter) {


    $scope.title = chapter.titles[0];

  }
  $scope.onTitleChange = function(b, t) {
    // alert(t);
    b.selectedTitle = t;

  }

});

＆＃13;

<head>

  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <div ng-app="app">
    <div ng-controller="homeCtrl">

      <div class="row">
        <div class="col-md-4 col-xs-4 col-sm-4">
          <select required ng-change="onBookChange(books,book)" ng-model="book" ng-options="bb.bookName for bb in books" class="form-control">
            <option value="">--Select--</option>
          </select>
        </div>
        <div class="col-md-4 col-xs-4 col-sm-4">
          <select required ng-model="chapter" ng-change="onChapterChange(books,chapter)" ng-options="cha.chapterName for cha in book.chapter" class="form-control">
            <option value="">--Select--</option>
          </select>
        </div>
        <div class="col-md-4 col-xs-4 col-sm-4">
          <select required ng-model="title" ng-change="onTitleChange(books,title)" ng-options="t for t in chapter.titles" class="form-control">
            <option value="">--Select--</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</body>

＆＃13;

Answer 2

您将ng-models设置为book，chapter，title。您只需要在范围

上为这些值分配默认值

$scope.book = $scope.books[0];
//in the onBookChange function
$scope.chapter = book.chapter;
//in the onChapterChange function
$scope.title = cha.titles[0];

如何使用angular设置每个级联下拉列表中的默认值？

2 个答案: