javascript - binding ng-model value into http parameter -


i trying show weather of location based on user input. have created input field takes location input. have used

ng-model

directive bind user input , place in $http parameter field.

the app supposed show weather based on user input. grateful if code , tell me did wrong.

html code:

<!doctype html> <html> <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script> <script src="app.js"></script> <head>   <meta charset="utf-8">   <title>angular js</title> </head> <body ng-app="jsbin">   <div ng-controller="democtrl vm">   <form>   location: <input type="text" ng-model="vm.location" value="paris">   <button type="button" ng-click=submit()>submit</button>   </form>     <h1>{{ vm.data| json}}</h1>    </div>  </body>  </html>

app.js:

var app = angular.module('jsbin', []);  app.controller('democtrl', function($http) {    var vm = this;     $scope.submit = function(){      var url = 'https://api.apixu.com/v1/current.json';     var request = {       method: 'get',       url: url,       params: {          q: vm.location,         mode:'json',         cnt:'7',         units:'imperial',         key:'1a17370dc8e34f09946231209170404'        }     };       $http(request)       .then(function(response) {         vm.data = response.data;         }).       catch(function(response) {         vm.data = response.data;        });   };  });

if controller instantiated "controlleras" syntax, don't use $scope, use this context.

in template:

  <div ng-controller="democtrl vm">   <form>   <!-- wrong   location: <input type="text" ng-model="location" value="paris">   <button type="button" ng-click=submit()>submit</button>   </form>   -->   <!-- right -->   location: <input type="text" ng-model="vm.location" value="paris">   <button type="button" ng-click=vm.submit()>submit</button>   </form>

js:

  var vm = this;   //vm.location = location;    //$scope.submit = function(){   vm.submit = function(){      var url = 'https://api.apixu.com/v1/current.json';     var request = {       method: 'get',       url: url,       params: {          //q:'vm.location',         //use variable         q: vm.location,         mode:'json',         cnt:'7',         units:'imperial',         key:'1a17370dc8e34f09946231209170404'        }     };

could explain why vm.location , not location in ng-model directive?

when controllers instantiated "controlleras" syntax, $compile service binds this context of controller property of $scope object specified name. reference properties of controllers this context, template should prefix property names name specified in "controlleras" binding.

the angularjs team recommends following "best practice" of always have '.' in ng-models — watch 3 minutes worth. misko demonstrates primitive binding issue ng-switch.

for more information, see angularjs wiki - understanding scopes.


Comments

Post a Comment

Popular posts from this blog

c# - Update a combobox from a presenter (MVP) -

i using mvp in project, new in mvp. have 2 comboboxes. when select option in combobox, combobox should filled new data. this action in presenter. view 'view1' in presenter, , introduced combobox1 , combobox2 properties in 'view1', because need 'datasource', 'displaymember', 'valuemember' , 'refresh()' in method below. but, when using pattern, enough send property like public string combobox2 { { return combobox1.selectedvalue.tosstring(); } } into presenter not whole combobox. how can solve problem? public void onselectedindexchangedcombobox1() { if (view1.combobox1.selectedindex == -1) { return; } datatable dt = tools.getdatatable("a path"); var query = (from o in dt.asenumerable() o.field<string>("afield") == farmerview.combobox1.selectedvalue.tostring() orderby o.field<string>("anotherfield") select...
Read more

How to understand 2 main() functions after using uftrace to profile the C++ program? -

i trying uftrace profile following simple c++ program: #include <iostream> class { public: a() {std::cout << "a created" << std::endl;} ~a() {std::cout << "a destroyed" << std::endl;} }; int main() { a; return 0; } the profile result this: # uftrace a.out created destroyed # duration tid function 2.026 [ 4828] | __cxa_atexit(); [ 4828] | main() { [ 4828] | __static_initialization_and_destruction_0() { 89.397 [ 4828] | std::ios_base::init::init(); 0.768 [ 4828] | __cxa_atexit(); 93.029 [ 4828] | } /* __static_initialization_and_destruction_0 */ 94.425 [ 4828] | } /* main */ [ 4828] | main() { [ 4828] | a::a() { 11.104 [ 4828] | std::operator <<(); 10.825 [ 4828] | std::basic_ostream::operator <<(); 24.514 [ 4828] | } /* a::a */ [ 4828] | a::~a() { 0.978 [ 4828] | ...
Read more

How to put a lock and transaction on table using spring 4 or above using jdbcTemplate and annotations like @Transactional? -

i trying put lock on table while writing on table , if happened in between roll-back . trying convert below code lock table test_g1 read; lock table test_g write; -- begin; start transaction; insert test_g1 values(143); insert test_g values(145); select * test_g1; select * test_g; rollback; select * test_g; unlock tables; how convert above code @transactional spring jdbctemplate code? @transactional(rollbackfor={dataaccessexception.class}) public void test(){ jdbctemplate.execute("insert test1 (id, nam) values (4, 'a')"); throw new dataaccessexception("error") { }; } here trying throw error, insert statement should rollback it's not happening . thanks edit-1 attaching code , doing in jdbcdaoimpl.java , mentioned problem comment above test() . app.java package com.cgiri.javabrains.spring4; import org.springframework.beans.factory.annotation.autowired; import org.springframework.context.applic...
Read more