javascript - AngularJS - Use data returned by a service in the controller and the view to populate dropdown -
this 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 , apple-touch-icon.png in 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 using <strong>outdated</strong> browser. please <a href="http://browsehappy.com/">upgrade browser</a> improve experience.</p> <![endif]--> <!-- add 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 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 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> this controller dropdown.js
(function() { 'use strict'; var callserv = function (getdata) { getdata.getlanguages(); }; angular.module('assignment3app') .controller ('callserv', ['getdata', callserv]); }()); service extractdata.js calls service obtain json data
(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]); }()); service fetches json data 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); }()); i want populate languages json file options in select menu.
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" ] } i have following questions:
1) how access returneddata variable in file extractdata.js in controller?
2) how use ng-repeat on option element in index.html show languages in dropdown? should use $index each element of json array in view?
3) depending on language user selects, when clicks on submit button, want selected language stored in service. have ideas?
update - questions 2
i able populate dropdown menu using ng-options. in controller, changed languages variable hold array of languages. below updated 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 , apple-touch-icon.png in 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 using <strong>outdated</strong> browser. please <a href="http://browsehappy.com/">upgrade browser</a> improve experience.</p> <![endif]--> <!-- add 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 language in languages"> <option value = ""> choose 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 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 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 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 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]); }());
first return data service using 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]); }()); then data returned promise , add scope in controller:
(function() { 'use strict'; //this select value $scope.selectedlanguage = ''; $scope.setlanguage = function(){ //this called when submit button 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]); }()); then can attach options select using ng-options
<select ng-options="language language in languages" ng-model="selectedlanguage"> </select> <button type="button" ng-click="setlanguage()">submit</button> 
Comments
Post a Comment