javascript - Angular : Binding ngrepeat values to model in AngularJS

Question

我正在创建一个简单的 FHIR 客户端来使用 AngularJS 编辑患者数据。我不明白为什么输入中的值未绑定(bind)到对象中的值。

自然地，我可以作弊并实现 keyup 和 $scope.$apply()，但有些东西告诉我这不是 AngularJS 应该做的.

我试过使用 $index 将值直接绑定(bind)到数组中的值，但这似乎没有任何作用。

代码如下:

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

我找到了解决方案。首先，绑定(bind)到 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>