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>

AngularJS：将ngrepeat值绑定到AngularJS中的模型

1 个答案: