javascript - AngularJS - 使用 Controller 和 View 中的服务返回的数据来填充下拉列表

标签 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">
    <!-- 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>

这是我的 Controller dropdown.js

(function() {
    'use strict';

    var callServ = function (getData) {
        getData.getLanguages();
        };

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

服务extractData.js调用其他服务获取json数据

(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 文件中的语言填充为选择菜单中的选项。

语言.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) 如何访问 Controller 中 extractData.js 文件中的 returnedData 变量？

2) 如何在 index.html 中的选项元素上使用 ng-repeat 来在下拉列表中显示所有语言？我应该使用 $index 来获取 View 中 JSON 数组的每个元素吗？

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

更新 - 问题 2

我能够使用 ng-options 填充下拉菜单。在我的 Controller 中，我更改了 languages 变量以仅保存 languages 数组。下面是我更新的 index.html 和 Controller 。

<!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>

dropdown.js

(function() {
    'use strict';

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

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

最佳答案

首先，您将使用 promise 从您的服务返回数据:

(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]);
}());

然后您将从返回的 promise 中获取数据并将其添加到 Controller 中的范围:

(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]);      
}());

然后您可以将选项附加到选择 using ng-options 

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

关于javascript - AngularJS - 使用 Controller 和 View 中的服务返回的数据来填充下拉列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32101107/

上一篇：javascript - TEmbeddedWB.ExecScriptEx 不适用于 JavaScript

下一篇：javascript - AngularJS - 将拖放与流程图相结合

相关文章：

angularjs - Angular ng-style for::after

javascript - 渲染后如何执行指令代码？

javascript - 使用 D3.js 和 AngularJS 定制折线图

AngularJS 选择其他选项并从文本框中获取值

javascript - 通过javascript按按钮加载嵌入式MP4视频

javascript - phantomjs 中的元素为 null

javascript - 如何根据值 Angular 隐藏表格列？

javascript - 带有 ng-init 的 AngularJS 元素指令在 View 呈现之前运行

javascript - 代码推送返回400错误

javascript - 在交互式报表上获取行数据

©2024 IT工具网  联系我们