AngularJS: привязка значений ngrepeat к модели в AngularJS

Question

Я создаю простой клиент FHIR для редактирования данных пациента с помощью AngularJS. Я не могу понять, почему значения в входах не привязаны к значениям в объекте.

Естественно, я мог обмануть и реализовать keyup и $scope.$apply(), но что-то говорит мне, что это не так, как это должно быть сделано в AngularJS.

Я попытался использовать $index, чтобы привязать значения непосредственно к значениям в массиве, но это, казалось, ничего не делало.

Вот код:

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

}); 

И следующий 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> 

и 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 

} 

Любые мысли о том, что я делаю неправильно здесь?

Вот упрощенная версия JSFiddle: https://jsfiddle.net/gmpp2fyk/1/. Если вы редактируете текстовое поле, JSON, похоже, не обновляется: $watch не срабатывает, и выражение остается таким, каким оно было.

Answer 1

У меня есть решение. Во-первых, привязка к переменной в ng-repeat не сработала, потому что она (очевидно) имела разную область видимости. Во-вторых, интуиция использовать индекс был прав, но это было сделано неправильно:

Здесь рабочий раствор (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>