5

में ऑब्जेक्ट से एनजी-मॉडल में डेटा प्राप्त करें मैं डेटा को नियंत्रक में किसी ऑब्जेक्ट से देखने में एनजी-मॉडल में नहीं डाल पा रहा हूं।कोणीय - नियंत्रक

View1:

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

जब मैं VIEW2 में एक बटन पर क्लिक करें, यह एक समारोह (कहना समारोह 'परीक्षण') सक्रिय करता है।

VIEW2

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

नियंत्रक:

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

संपादित करें: मैं, नियंत्रक की घोषणा को दिखाने के लिए और साथ ही कोशिश की है कि अगर मदद करता है। मैं इसे कैसे बना सकता हूं ताकि जब मैं VIEW2 पर प्रोफ़ाइल बटन पर क्लिक करूं, तो यह डेटा के साथ VIEW1 को पॉप्युलेट करता है?

+2

यह आपका संपूर्ण नियंत्रक है? क्या आप 'एनजी-नियंत्रक 'घोषणा और शेष नियंत्रक प्रदान कर सकते हैं? –

+0

हे @LenilsondeCastro पूरे नियंत्रक बहुत बड़ा है, मैंने आपको केवल उन हिस्सों को दिया जो मैंने जरूरी सोचा था। हालांकि, मुझे कोड को सारणी दें और आपको घोषणा भी दें .. –

+0

हे @LenilsondeCastro ... संपादित और नियंत्रक घोषित किया। –

उत्तर

0

plunker:

Working example

एचटीएमएल:

<!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="[email protected]" 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="E.g. 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> 

जे एस:

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

अनुशंसाएँ:

  1. कृपया ठीक से प्रारूप कोड जब प्रश्न पूछने।
  2. अच्छी प्रैक्टिस एक स्टाइल गाइड का उपयोग करें। एक अच्छा प्रारंभिक बिंदु John Papa's Angular Style Guide
संबंधित मुद्दे