current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.
up vote 3 down vote favorite
1

I am creating a simple FHIR client to edit patient data using AngularJS. I can't figure out why the values in the inputs are not bound to values in the object.

Naturally, I could cheat and implement keyup and $scope.$apply(), but something tells me this is not how it is supposed to be done in AngularJS.

I've tried using $index to bind the values directly to the values in the array, but that didn't seem to do anything.

Here is the code:

var app = angular.module('FhirClient', []);
app.controller('PatientCtrl', function ($scope, $http) {

console.log("Evaluating Patient");
var responsePromise = $http.get("http://nprogram.azurewebsites.net/Patient/1?_format=json&_sm_au_=iMH046nNq52RDM6q");

responsePromise.success(function (data, status, headers, config) {
    console.log("Successful connection");
    $scope.patient = data;
});
responsePromise.error(function (data, status, headers, config) {
    alert("AJAX failed!");
});

$scope.$watch('patient', function (newValue, oldValue) {
    console.log(newValue);
});

});

And the following HTML:

<div ng-controller="PatientCtrl">
    <div class="container">
        <h1>Patient Details</h1>

        <code>{{patient | json}}</code>
        <div class="col-md-6">
            <h2>Names</h2>
            <div class="list-group" ng-repeat="names in patient.name track by $namesIndex">
                <h3><span class="label label-primary">{{x.use}}</span></h3>
                <div class="form-group" ng-repeat="lastName in names.family track by $familyNamesIndex">
                    <label for="familyName">Family Names:</label>
                    <input class="form-control" ng-model="lastName" />
                </div>
                <div class="form-group" ng-repeat="firstName in names.given">
                    <label for="givenName">Given Names:</label>
                    <input class="form-control" type="text" ng-model="firstName"/>
                </div>
            </div>
        </div>
        <div class="col-md-6"></div>
    </div>
</div>

and the JSON:

{
"resourceType":"Patient",
    "text":
    {
        "status": "generated",
        "div": "<div xmlns='http://www.w3.org/1999/xhtml'><p>Harley N Hobbs</p><p>16 Pier Road</p><p>STANWARDINE IN THE FIELDS</p><p>SY4 7IW</p><p>Date of birth: 1966-06-07</p></div>"
    },
    "identifier":
    [{
        "use": "official",
        "label": "SSN",
        "system": "http://hl7.org/fhir/sid/us-ssn",
        "value": "1"
    }],
    "name":
    [{
        "use": "official",
        "family":[ "Hobbs"],
        "given":[ "Harley"]
    }],
    "telecom":
    [{
        "system": "phone",
        "value": "077 8169 8899",
        "use": "home"
    }],
    "gender":
    {
        "coding":
        [{
            "system": "http://hl7.org/fhir/sid/v2-0001",
            "code": "male"
        }]
    },
    "birthDate": "1966-06-07",
    "deceasedBoolean": false,
    "address":
    [{
        "use": "home",
        "text": "16 Pier Road, STANWARDINE IN THE FIELDS, SY4 7IW",
        "line":[ "16 Pier Road"],
        "city": "STANWARDINE IN THE FIELDS",
        "zip": "SY4 7IW"
    }],
    "careProvider":
    [{
        "reference": "../organization/@1"
    }],
    "active": true

}

Any thoughts on what I am doing wrong here?

Here is a simplified JSFiddle: https://jsfiddle.net/gmpp2fyk/1/ . If you edit the textbox, JSON doesn't seem to be updated: $watch doesn't fire and the expression remains just the way it was.

share|improve this question
    
show me your names JSON. – Rishi Prakash Apr 15 at 13:26
    
I am a little skeptic about your use of ng-repeat. – Rishi Prakash Apr 15 at 13:27
    
You have only one "name" in the json. Why do you want to do a ng-repeat over a single object? – aleberguer Apr 15 at 13:32
    
In this particular case, there is only one name, however, names is an array and can contain more names and within this array you have an array of given names and family names – Dawid O Apr 15 at 13:34
    
@DawidO it's seems fine to me – Rishi Prakash Apr 15 at 13:47

1 Answer 1

up vote 0 down vote accepted

I've got the solution. Firstly, binding to the variable in ng-repeat didn't work because it (obviously) had a different scope. Secondly, the intuition to use index was right, but it was done in a wrong way:

Here is the working solution (https://jsfiddle.net/gmpp2fyk/15/):

<div ng-controller="PatientCtrl">
<div class="container">
    <h1>Patient Details</h1>
    {{patient | json}}
    <div class="col-md-6">
        <h2>Names</h2>
        <div class="list-group" ng-repeat="names in patient.name track by $index">
            <h3><span class="label label-primary">{{x.use}}</span></h3>
            <div class="form-group" ng-repeat="lastName in names.family track by $index">
                <label for="familyName">Family Names:</label>
                f:{{ $parent.$index }}
                <input class="form-control" ng-model="patient.name[$parent.$index].family[$index]" />
            </div>
            <div class="form-group" ng-repeat="firstName in names.given track by $index">
                <label for="givenName">Given Names:</label>
                <input class="form-control" type="text" ng-model="patient.name[$parent.$index].given[$index]" />
            </div>
        </div>
    </div>
    <div class="col-md-6"></div>
</div>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.