Javascript AngularJS-使用控制器和视图中的服务返回的数据填充下拉列表_Javascript_Angularjs_Angularjs Ng Repeat

Javascript AngularJS-使用控制器和视图中的服务返回的数据填充下拉列表

javascript angularjs

Javascript AngularJS-使用控制器和视图中的服务返回的数据填充下拉列表,javascript,angularjs,angularjs-ng-repeat,Javascript,Angularjs,Angularjs Ng Repeat,这是我的index.html <!doctype html> <html class="no-js"> <head> <meta charset="utf-8"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"&g

这是我的index.html

<!doctype html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->
    <link rel="stylesheet" href="styles/settingsStyles/generalSettings.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

  </head>
  <body ng-app="assignment3App">
    <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Add your site or application content here -->

    <div class="container">
        <h2>General Settings</h2>            
        <table class="table">
          <tbody>
            <tr class="success">
              <td class = "col-xs-3">Language:</td>
              <td class = "col-xs-9">Gmail display language:
                  <select ng-controller = "callServ as langData">
                      <option ng-click = "langData.callServ()"> language </option>
                  </select>
              </td>
            </tr>

            <tr class="danger">
              <td class = "col-xs-3">Phone numbers:</td>
              <td class = "col-xs-9">Default country code:</td>
            </tr>

            <tr class="info">
              <td class = "col-xs-3">Maximum page size: </td>
              <td class = "col-xs-9"> Show conversations per page 
                  <aside> Show contacts per page </aside>
              </td>
            </tr>

            <tr class="success">
              <td class = "col-xs-3">Default reply behavior:</td>
              <td class = "col-xs-9">Reply: 
                  <aside> Reply all:  </aside>
            </tr>

            <tr class="danger">
              <td class = "col-xs-3">Undo Send:</td>
              <td class = "col-xs-9">Enable Undo Send 
                  <aside> Send cancellation period:  </aside>
              </td>
            </tr>

            <tr class="info">
              <td class = "col-xs-3">Signature:  </td>
              <td class = "col-xs-9"> No signature</td>
            </tr>
          </tbody>
        </table>
      </div>

    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
     <script>
       !function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
       (A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
       r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
       }(window,document,'script','//www.google-analytics.com/analytics.js','ga');

       ga('create', 'UA-XXXXX-X');
       ga('send', 'pageview');
    </script>

    <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-touch/angular-touch.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        <script src="scripts/controllers/main.js"></script>
        <script src="scripts/controllers/about.js"></script>
        <script src="scripts/controllers/dropdown.js"></script>
        <script src="scripts/services/extractData.js"></script>
        <script src="scripts/services/fetchData.js"></script>
        <!-- endbuild -->
</body>
</html>

调用另一个服务以获取json数据的服务

extractData.js

(function() {
  'use strict';

  var getData = function (fetchDataService) {
      this.getLanguages = function() {

             fetchDataService.getContent()
              .then(function (returnedData) {
                    console.log(returnedData.data.languages[0]);
                  });
              };   
      };    

      angular.module('assignment3App')
        .service ('getData', ['fetchDataService', getData]);
}());

获取JSON数据的服务

fetchData.js

：

(function() {
  "use strict";

  var fetchDataService = function($http) {
      this.getContent = function() {
        return $http({
            method : 'get',
            url : '../../data/languages.json'
          });
      };
  };

  angular.module('assignment3App')
    .service ('fetchDataService', fetchDataService);
}());

我想将JSON文件中的语言填充为选择菜单中的选项

language.json

{
    "languages": [
        "Afrikaans",
        "Albanian",
        "Arabic",
        "Armenian",
        "Basque",
        "Bengali",
        "Catalan",
        "Cambodian",
        "Chinese (Mandarin)",
        "German",
        "Greek",
        "Gujarati",
        "Hebrew",
        "Icelandic" ,
        "Maori" ,
        "Marathi",
        "Mongolian",
        "Serbian",
        "Slovak",
        "Slovenian",
        "Spanish",
        "Swahili",
        "Swedish" ,
        "Tamil" ,
        "Tatar" ,
        "Telugu"
    ] 
}

我有以下问题：

1）如何访问控制器中文件

extracteddata.js

中的

returnedData

变量

2）如何在

index.html

中的option元素上使用ng repeat在下拉列表中显示所有语言？我应该使用$index来获取视图中JSON数组的每个元素吗

3）根据用户选择的语言，当他单击submit按钮时，我希望所选语言存储在另一个服务中。有人有什么想法吗

更新-问题2

我能够使用

ng选项

填充下拉菜单。在我的控制器中，我将

语言

变量更改为仅保存

语言

数组。下面是我更新的

index.html

和控制器

<!doctype html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    <title> Settings Page </title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="styles/settingsStyles/generalSettings.css">

  </head>
  <body ng-app="assignment3App">
    <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Add your site or application content here -->

    <div class="container">
        <h3>General Settings</h3>      

        <table class="table">
          <tbody>
            <tr class="success" ng-controller = "callServ">
              <td class = "col-xs-3">Language:</td>
              <td class = "col-xs-9">Gmail display language:
                  <select ng-model = "selectedLang" ng-options="language for language in languages">
                      <option value = ""> Choose a language </option>
                  </select>
              </td>
            </tr>

            <tr class="danger">
              <td class = "col-xs-3">Phone numbers:</td>
              <td class = "col-xs-9">Default country code:
                  <select>
                      <option> Country code </option>
                  </select>
              </td>
            </tr>

            <tr class="info">
              <td class = "col-xs-3">Maximum page size: </td>
              <td class = "col-xs-9"> Show conversations per page 
                  <select>
                      <option> 10 </option>
                  </select>

                  <aside id = "pageSize"> Show contacts per page 
                        <select>
                            <option> 20 </option>
                        </select>
                  </aside>

              </td>
            </tr>

            <tr class="success">
              <td class = "col-xs-3">Default reply behavior:</td>
              <td class = "col-xs-9">
                  <input type = "radio" name = "replySetting" id = "reply" checked> 
                  <label for="reply"> Reply </label>

                  <aside> 
                        <input type = "radio" name = "replySetting" id = "replyAll"> 
                        <label for="replyAll"> Reply all</label> 
                  </aside>
            </tr>

            <tr class="danger">
              <td class = "col-xs-3">Undo Send:</td>
              <td class = "col-xs-9" ng-controller = "undoSendController as undoSend">
                  <input type = "checkbox" id = "undoSend" ng-click = "undoSend.displayCancelPeriod()"> 
                  <label for="undoSend"> Enable Undo Send  </label> 

                  <aside ng-show = "undoSend.cancelPeriod" ng-cloak> Send cancellation period:  
                      <select>
                            <option> 10 </option>
                      </select>
                  </aside>
              </td>
            </tr>

            <tr class="info" ng-controller = "signatureController as signature">
              <td class = "col-xs-3">Signature:  </td>
              <td class = "col-xs-9"> 
                  <input type = "radio" name = "signature" ng-click = "signature.disableTextarea()" id = "noSignature" checked> 
                  <label for="noSignature"> No signature </label> 
                    <div class="span12" >
                          <input type = "radio" name = "signature" ng-click = "signature.enableTextarea()" id = "signature">
                          <textarea class="field span6" id="textarea" rows="6" cols = "50" placeholder="Enter a signature" ng-disabled = "signature.typeSignature"></textarea>
                    </div>
              </td>
            </tr>
          </tbody>
        </table>

        <div class="form-actions">
          <button type="submit" class="btn btn-primary">Save changes</button>
          <button type="button" class="btn">Cancel</button>
        </div>
      </div>

    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
     <script>
       !function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
       (A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
       r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
       }(window,document,'script','//www.google-analytics.com/analytics.js','ga');

       ga('create', 'UA-XXXXX-X');
       ga('send', 'pageview');
    </script>

    <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-touch/angular-touch.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        <script src="scripts/controllers/main.js"></script>
        <script src="scripts/controllers/about.js"></script>
        <script src="scripts/controllers/dropdown.js"></script>
        <script src="scripts/controllers/undoSend.js"></script>
        <script src="scripts/controllers/signature.js"></script>
        <script src="scripts/services/promise.js"></script>
        <script src="scripts/services/callJson.js"></script>
        <!-- endbuild -->
</body>
</html>

首先，您将使用以下承诺从您的服务返回数据：

(function() {
  'use strict';

  var getData = function (fetchDataService) {
      this.getLanguages = function() {

             return fetchDataService.getContent()
              .then(function (returnedData) {
                    return returnedData.data;
                    //console.log(returnedData.data.languages[0]);
                  });
              };   
      };    

      angular.module('assignment3App')
        .service ('getData', ['fetchDataService', getData]);
}());

然后，您将从返回的承诺中获取数据，并将其添加到控制器中的作用域中：

(function() {
    'use strict';

    //this will be the select value
    $scope.selectedLanguage = '';

    $scope.setLanguage = function(){
        //this is called when the submit button is clicked
        yourService.languageChanged($scope.selectedLanguage);
    };

    var callServ = function (getData) {
        getData.getLanguages().then(function(data){
            //data = returnedData.data
            $scope.languages = data;
        });
    };

    angular.module('assignment3App')
      .controller ('callServ', ['getData', callServ]);      
}());

然后可以将选项附加到“选择”选项卡


提交

谢谢您的回答。这很有帮助。然而，我仍然有一个问题。我在控制台中没有得到任何错误，但是选项没有填充。你对此有什么意见吗？这是select元素<代码>.ng选项非常奇怪，使用起来非常笨拙。我总是要搞乱语法才能输出东西。此外，它还取决于您要返回的数据类型。如果您有一个对象数组，则必须指定要显示的键。etcI已更改

ng options

，现在它在下拉菜单中给出了未定义的键<代码>。早些时候，它没有在下拉列表中显示任何内容，我发现了这一点。我会更新我的问题，以便其他人也能理解。谢谢你的帮助。

(function() {
  'use strict';

  var getData = function (fetchDataService) {
      this.getLanguages = function() {

             return fetchDataService.getContent()
              .then(function (returnedData) {
                    return returnedData.data;
                    //console.log(returnedData.data.languages[0]);
                  });
              };   
      };    

      angular.module('assignment3App')
        .service ('getData', ['fetchDataService', getData]);
}());

(function() {
    'use strict';

    //this will be the select value
    $scope.selectedLanguage = '';

    $scope.setLanguage = function(){
        //this is called when the submit button is clicked
        yourService.languageChanged($scope.selectedLanguage);
    };

    var callServ = function (getData) {
        getData.getLanguages().then(function(data){
            //data = returnedData.data
            $scope.languages = data;
        });
    };

    angular.module('assignment3App')
      .controller ('callServ', ['getData', callServ]);      
}());

<select ng-options="language for language in languages"
    ng-model="selectedLanguage">
</select>
<button type="button" ng-click="setLanguage()">Submit</button>