All geek questions in one place

Angular - Get data in ng-Model from an object in the controller

I cannot put data in an ng model from the point of view of an object in a controller.

VIEW1:

<input type="text" class="user-input" name="profile.firstname" ng-model="profile.firstname" ng-minlength="2" required pattern=".{2,}" placeholder="Eg Anvika" title="Please enter atleast 2 characters">

When I press a button in VIEW2, it launches a function (say, the function 'test').

VIEW2

 <input type="submit" ng-click="register.test()" ui-sref="doctorRegister" value="Profile">

CONTROLLER:

 var app = angular.module('app'); app.controller('registerController', ['$scope', 'tempDataStorageService', function ($scope, tempDataStorageService) { var register = this; register.doctor = {}; register.test = function () { register.refreshProfile = tempDataStorageService.get(register.doctor.profile); //console.log(register.refreshProfile); var a = register.refreshProfile.firstname; console.log(a); } }

TempDataStorageService:

 var app = angular.module('app'); app.factory('tempDataStorageService', function() { var savedData = {}; function set(data) { savedData = data; } function get() { return savedData; } return { set: set, get: get } });

EDIT: I tried showing a controller declaration if that helps. How can I do this so that when I click the Profile button on VIEW2, it fills VIEW1 with data?

+5
source share
1 answer

Plunker:

Working example

html:

 <!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script>document.write('<base href="' + document.location + '" />');</script> <link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <script data-require=" angular.js@1.4.x " src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script> <script src="app.js"></script> </head> <body ng-controller="MainCtrl as mainCtrl"> <form> <h2 class="text-primary">Get data into ng-Model from object in controller</h2> <hr> <div class="form-group"> <h3 ng-class="!mainCtrl.firstName? 'text-danger' : 'text-success'">Enter Name</h3> <input type="text" class="form-control" ng-model="mainCtrl.firstName" placeholder="Eg Anvika"> </div> <hr> <h3 class="text-info">This is what you are typing: {{mainCtrl.firstName}}</h3> <button type="button" class="btn btn-success" ng-click="mainCtrl.test()">Save Name</button> </form> <hr> <h3 class="text-info">This is what is stored</h3> <h4>Doctor first name: {{mainCtrl.storedData.doctorFirstName}}</h4> </body> </html>

JS:

 var app = angular.module('plunker', []); app.controller('MainCtrl', ['tempDataStorageService', function(tempDataStorageService) { var register = this; register.firstName = ""; register.storedData = tempDataStorageService; register.test = function () { tempDataStorageService.setName(register.firstName); } }]); app.factory('tempDataStorageService', function() { // The service object var profile = {}; profile.doctorFirstName = "No doctor data stored"; //The functions profile.setName = function(data) { profile.doctorFirstName = data; } profile.getName = function() { return profile.doctorFirstName; } // return the service object return profile; });

Recommendations:

  • Please format the code correctly when asking questions.
  • As a good practice, use the style guide. A good starting point is John Papa Angular Style Guide
0
source

Source: https://habr.com/ru/post/1241122/

More articles:


All Articles