javascript - Angularjs Cannot read property 'id' of undefined -
i new angularjs, i'm trying create webapp can access data server , post data server. i'm facing issues, did in application, have created module,service,view , controller in separate files. i'm unable access , post data server. can me.
home.js(controller file)
var myapp = angular.module('demo').controller("homecontroller", function($scope,myservice){ var userarray = { id:$scope.user.id, model:$scope.user.model, name:$scope.user.name, color:$scope.user.color, price: $scope.user.price }; myservice.async().then(function(d){ $scope.hello=d; }); $scope.push = function(userarray){ myservice.saveuser(userarray).then(function(response){ console.log("inserted"); }); } }); userservice.js(service file)
myapp.factory('myservice',function($http){ var myservice={ async : function(){ var promise= $http.get('http://jsonplaceholder.typicode.com/posts/1').then(function(response){ console.log(response); return response; }); return promise; }, saveuser : function(user){ $http.post('http://jsonplaceholder.typicode.com/posts',user).success( function(response,status,headers,config){ }); } }; return myservice; }); restcomponent.js(module file)
var myapp=angular .module('demo',['ui.router']) .config(function ($stateprovider, $urlrouterprovider){ $urlrouterprovider.otherwise('/home'); $stateprovider .state('home',{ url:'/home', templateurl:'templates/home.html', controller:'homecontroller' }) .state('about', { url:'/about', templateurl:'templates/about.html', controller:'aboutcontroller' }) .state('contact',{ url:'/contact', templateurl:'templates/contact.html', controller:'contactcontroller' }); }); home.html (view file)
<form ng-submit="mod.push();" ng-controller="homecontroller mod"> id:<br> <input type="text" name="id" ng-model="mod.user.id"><br> model:<br> <input type="text" name="model" ng-model="mod.user.model"><br> name:<br> <input type="text" name="name" ng-model="mod.user.name"><br> color:<br> <input type="text" name="color" ng-model="mod.user.color"><br> price:<br> <input type="text" name="price" ng-model="mod.user.price"><br> <br> <input type="submit" > </form> <br> <br> <table> <thead> <th>userid</th> <th>name</th> <th>country</th> </thead> <tbody> <tr ng-repeat="employee in hello"> <td>{{employee.userid}}</td> <td>{{employee.name}}</td> <td>{{employee.country}}</td> </tr> </tbody> </table> index.html
<!doctype html> <html lang="en" > <head> <meta charset="utf-8"> <title>restapi</title> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" /> <script src="bower_components/angular/angular.js"></script> <script src=" https://cdnjs.cloudflare.com/ajax/libs/angular-ui- router/0.3.1/angular-ui-router.js "></script> <script src="rest-controller.component.js"></script> <script src="controllers/contact.js"></script> <script src="controllers/about.js"></script> <script src="controllers/home.js"></script> <script src="service/userservice.js"></script> </head> <body ng-app="demo" > <ol> <li><a ui-sref="home">home</a></li> <li><a ui-sref="about">about</a></li> <li><a ui-sref="contact">contact</a></li> </ol> <div ui-view></div> </body> </html>
change that
you didnt declare scope undefined why better declare before using removes user array did not need that
var myapp = angular.module('demo').controller("homecontroller", function($scope,myservice){ $scope.user = {}; // here declare user obkect $scope.push = function(user){ myservice.saveuser(user).then(function(response){ console.log("inserted"); }); } }) and home html wanted use scope used controller var view know scope , objects write var fun name , go directly or can same controller using instead of scope , mod did
here should send user or can in controller sending $scope.user
<form ng-submit="push(user);"> id:<br> <input type="text" name="id" ng-model="user.id"><br> model:<br> <input type="text" name="model" ng-model="user.model"><br> name:<br> <input type="text" name="name" ng-model="user.name"><br> color:<br> <input type="text" name="color" ng-model="user.color"><br> price:<br> <input type="text" name="price" ng-model="user.price"><br> <br> <input type="submit" > </form> and route
better declare controller on view cant them both chosed view controller
var myapp=angular .module('demo',['ui.router']) .config(function ($stateprovider, $urlrouterprovider){ $urlrouterprovider.otherwise('/home'); $stateprovider .state('home',{ url:'/home', templateurl:'templates/home.html' }) .state('about', { url:'/about', templateurl:'templates/about.html' }) .state('contact',{ url:'/contact', templateurl:'templates/contact.html' }); }); should work way
Comments
Post a Comment