Angular - Daten vom Objekt im Controller in das ng-Modell laden

Ich kann die Daten nicht in das ng-Modell von einem Objekt im Controller einfügen.Angular - Daten vom Objekt im Controller in das ng-Modell laden

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">

Wenn ich eine Schaltfläche in View2 klicken, wird eine Funktion ausgelöst wird (sagen Funktion 'Test').

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

REGLER:

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: Ich habe versucht, auch die Erklärung des Controllers zu zeigen, ob das hilft. Wie kann ich es so machen, dass, wenn ich auf die Schaltfläche Profil auf VIEW2 klicke, es VIEW1 mit den Daten füllt?

Quelle

2016-01-21 Sarthak Batra

Das ist Ihr gesamter Controller? Können Sie die 'ng-controller' Deklaration und den Rest Ihres Controllers bereitstellen? –

Hey @LenilSondeCastro der gesamte Controller ist riesig, ich habe dir nur die Teile gegeben, die ich für nötig hielt. Lassen Sie mich jedoch den Code abstrahieren und geben Sie die Erklärung auch .. –

Hey @LenilsondeCastro ... Editiert und deklariert den Controller. –

Die Plunker:

Working example

Die 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="[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>

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

Empfehlungen:

Bitte richtig Code-Format, wenn Fragen zu stellen.
Als gute Praxis verwenden Sie einen Style Guide. Ein guter Startpunkt ist John Papa's Angular Style Guide

Quelle

2016-02-03 17:01:32

Angular - Daten vom Objekt im Controller in das ng-Modell laden

Antwort

Verwandte Themen